Checkbox
1. What does the component do?
- It is used for the entry of yes/no values.
2. When should the component be used?
- When selecting an option.
- When selecting several options that are independent of one another.
3. Rules
- A checkbox is only permitted within forms.
- Several checkboxes can be arranged vertically or horizontally. The vertical layout is preferred as it allows the user to understand the options more quickly.
- Horizontal layout only for two to three options and short names.
- The text can be multi-line.
- In addition to the actual checkbox, the entire text can also be used as a click target.
- A title can be used above a checkbox group.
- A question mark in the circle can be show – in addition to the title – for detailed explanations on a checkbox group. A tooltip opens when this question mark is clicked on.
4. Variants and statuses
The component has the following statuses:
- Checked
- Indeterminated
- Unchecked
- Focused Checked
- Focused Indeterminate
- Focused Unchecked
- Disabled Checked
- Disabled Indeterminated
- Disabled Unchecked
4.1 Standard
Design specification
- Checked
- Indeterminated
- Unchecked
- Focused Checked
- Focused Indeterminated
- Focused Unchecked
- Disabled Checked
- Disabled Indeterminated
- Disabled Unchecked