Navigieren auf digital.sbb.ch

Beta

Radiobutton

1. What does the component do?

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

2. When should the component be used?

  • Where there are two or more options which mutually exclude one another.

3. Rules

  • A radio button is only permitted within a form.
  • There must be at least two options available.
  • 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.
  • A horizontal layout is not permitted for mobile views.
  • 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 – in addition to the title – can also be shown for detailed explanations on a radio button group. A tooltip opens if the question mark is clicked on.

4. Variants and statuses

The component has the following statuses:

  • Checked
  • Unchecked
  • Focused checked
  • Focused unchecked
  • Disabled checked
  • Disabled unchecked

4.1 Standard

Image of the radio button component in the standard variant

Design specification

Code specification

4.2 Vertical radio button group

Image of the radio button component as a vertical group

Design specification

Code specification

4.3 Horizontal radio button group

Image of the radio button component as a horizontal group

Design specification

Code specification