Radiobutton
1. What does the component do?
- It is used to select precisely one of several options.
2. When should the component be used?
- Where there are two or more options which mutually exclude one another.
3. Rules
- A radio button is only permitted within a form.
- There must be at least two options available.
- A pre-selection is mandatory.
- Radio buttons can be arranged vertically or horizontally. The vertical layout is preferred as it allows the user to understand the options more quickly.
- A horizontal layout is not permitted for mobile views.
- The text can be multi-line.
- In addition to the actual radio button, the entire text can also be used as a click target.
- A title can be used above a radio button group.
- A question mark in the circle – in addition to the title – can also be shown for detailed explanations on a radio button group. A tooltip opens if the question mark is clicked on.
4. Variants and statuses
The component has the following statuses:
- Checked
- Unchecked
- Focused checked
- Focused unchecked
- Disabled checked
- Disabled unchecked
4.1 Standard
Design specification
Code specification
4.2 Vertical radio button group
Design specification
Code specification
4.3 Horizontal radio button group
