Navigieren auf digital.sbb.ch

Beta

Radiobutton

1. What does the element do?

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

2. When should the element be used?

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

3. Regeln

  • There must be a choice of at least two options.
  • A pre-selection is mandatory.
  • In addition to the label, an icon can also be displayed for detailed explanations. When this question mark is clicked on a opens.
  • 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.

4. Variants and statuses

The element has the following statuses:

The element has the following variants:

  • with info (only with vertical layout)
  • without info
  • vertical layout
  • horizontal layout

4.1 Vertical layout

Image of the radio buttons, vertical layout, with info
Image of the radio buttons, vertical layout, without info

Design Specification

4.2 Horizontal layout

Image of the radio buttons, horizontal layout

Design Specification

1. What does the element do?

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

2. When should the element be used?

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

3. Regeln

  • There must be a choice of at least two options.
  • A pre-selection is mandatory.
  • In addition to the label, an icon can also be displayed for detailed explanations. When this question mark is clicked on a opens.
  • 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.

4. Variants and statuses

The element has the following statuses:

The element has the following variants:

  • with info (only with vertical layout)
  • without info
  • vertical layout
  • horizontal layout

4.1 Vertical layout

Image of the radio buttons, vertical layout, with info
Image of the radio buttons, vertical layout, without info

Design Specification

4.2 Horizontal layout

Image of the radio buttons, horizontal layout

Design Specification