1. What does the element do?

• It is used for the selection of exactly one option from several.

2. When should the element be used?

• When there are two or more options and the options mutually exclude one another.

3. Regeln

• There must be a choice of at least two options.
• A pre-selection is mandatory.
• Radio buttons 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.
• As well as the actual radio button, the entire text also serves as a click target.

4. Variants and statuses

The element has the following statuses:

• Checked
• Unchecked
• Disabled checked
• Disabled unchecked
• Loading

The element has the following variants:

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

4.1 Radiobutton

4.1.1 without icon

4.1.2 with icon

4.2 Radiobutton-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