What does the component do?

• It is used to select precisely one of several options.

When should the component be used?

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

Rules

• A radio button is only permitted within a form.
• 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.
• The text can be multi-line.
• In addition to the actual radio button, the entire text can also be used as a click target.
• A title can be used above a radio button group.
• A question mark in the circle can also be shown – in addition to the title – for detailed explanations on a radio button group. A tooltip opens if this question mark is clicked on.

States

The component has the following states:

• Checked
• Unchecked
• Focused Checked
• Focused Unchecked
• Disabled Checked
• Disabled Unchecked

Variants

Default

Specifications

DesignCode