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.
  • 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

Image of the checkbox component

Design specification

Code specification