Radio-Button. Overview

What does the component do?

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

When should the component be used?

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

Rules

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

States

The component has the following states:

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

Variants

The component 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

Radiobutton

without icon

[object Promise]

with icon

[object Promise]

Radiobutton-Item

List

[object Promise]

List, with icons (left and right)

[object Promise]

List, with subtext

[object Promise]

List, with button

[object Promise]

List, loading

[object Promise]

Boxed

[object Promise]

Boxed, with icons (left and right)

[object Promise]

Boxed, with subtext

[object Promise]

Boxed, with button

[object Promise]

Boxed, loading

[object Promise]

Specification

[object Promise]