Navigieren auf


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.
  • A pre-selection is mandatory (active or inactive, no tristate).
  • 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.
  • A horizontal layout is not permitted for mobile views.
  • 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 inserted above a checkbox group.
  • A question mark in the circle can also be shown – in addition to the title – for detailed explanations. A tooltip opens when this 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

Image of the checkbox component in the standard variant

Design specification

Code specification

4.2 Vertical checkbox group

Image of the checkbox as a vertical group component

Design specification

Code specification

4.3 Horizontal checkbox group

Image of the checkbox as a horizontal group component

Design specification

Code specification