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
Image of a radiobutton, without icon
Image of a radiobutton, without icon
with icon
Image of a radiobutton, with icon
Image of a radiobutton, with icon

Radiobutton-Item

List
Image of a radiobutton-item in a list, default
Image of a radiobutton-item in a list, default
List, with icons (left and right)
Image of a radiobutton-item in a list, with icons
Image of a radiobutton-item in a list, with icons
List, with subtext
Image of a radiobutton-item in a list, with subtext
Image of a radiobutton-item in a list, with subtext
List, with button
Image of a radiobutton-item in a list, with button
Image of a radiobutton-item in a list, with button
List, loading
Image of a radiobutton-item in a list, loading
Image of a radiobutton-item in a list, loading
Boxed
Image of a radiobutton-item in a box, default
Image of a radiobutton-item in a box, default
Boxed, with icons (left and right)
Image of a radiobutton-item in a box, with icons
Image of a radiobutton-item in a box, with icons
Boxed, with subtext
Image of a radiobutton-item in a box, with subtext
Image of a radiobutton-item in a box, with subtext
Boxed, with button
Image of a radiobutton-item in a box, with button
Image of a radiobutton-item in a box, with button
Boxed, loading
Image of a radiobutton-item in a box, loading
Image of a radiobutton-item in a box, loading

Specification

Design