Checkbox Overview

What does the component do?

  • It is used for the entry of yes/no values.

When should the component be used?

  • When selecting an option.
  • When selecting several options that are independent of one another.

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

States

The component has the following states:

  • Checked
  • Indeterminated
  • Unchecked
  • Focused Checked
  • Focused Indeterminate
  • Focused Unchecked
  • Disabled Checked
  • Disabled Indeterminated
  • Disabled Unchecked

Variants

Default

Image of a checkbox


Specifications

DesignCode