1. What does the element do?

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

2. When should the element be used?

• When selecting one or more options that are independent of one another.

3. Rules

• 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 with two or 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.

4. Features and statuses

The element has the following statuses:

• Checked
• Unchecked
• Tristate
• Disabled Checked
• Disbaled Unchecked
• Disabled Tristate
• Loading

The element has the following variants:

• Checkbox
  • with icon / without icon
• Checkbox-Item
  • listed / boxed
  • without icon / with icon
  • without subtext / with subtext
  • without button / with button

4.1 Checkbox

4.1.1 without icon

4.1.2 with icon

4.2 Checkbox-Item

4.2.1 List

4.2.2 List, with Icons (left und right)

4.2.3 List, with subtext

4.2.4 List, with button

4.2.5 List, loading

4.2.6 Boxed

4.2.7 Boxed, with icons (left und right)

4.2.8 Boxed, with subtext

4.2.9 Boxed, with button

4.2.10 Boxed, loading

Design Specification

Figma-Link