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