Navigieren auf digital.sbb.ch

Beta

Radiobutton

1. Was macht das Element?

  • Dient zur Auswahl genau einer Option aus mehreren.

2. Wann soll das Element eingesetzt werden?

  • Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig ausschliessen.

3. Regeln

  • Es müssen mindestens zwei Optionen zur Auswahl stehen.
  • Eine Vorauswahl ist Pflicht.
  • Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch können die Benutzenden die Auswahlmöglichkeiten schneller erfassen.
  • Horizontale Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
  • Der Text kann mehrzeilig sein.
  • Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

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

Das Element hat folgende Ausprägungen:

  • Radiobutton
    • ohne Icon / mit Icon
  • Radiobutton-Item
    • listed / boxed
    • ohne Icon / mit Icon
    • ohne Subtext / mit Subtext
    • ohne Button / mit Button

4.1 Radiobutton

4.1.1 ohne Icon

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.1.2 mit Icon

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2 Radiobutton-Item

4.2.1 Liste

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.2 Liste, mit Icons (links und rechts)

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.3 Liste, mit Subtext

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.4 Liste, mit Button

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.5 Liste, ladend

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.6 Boxed

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.7 Boxed, mit Icons (links und rechts)

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.8 Boxed, mit Subtext

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.9 Boxed, mit Button

Darstellung der Radiobuttons
Darstellung der Radiobuttons

4.2.10 Boxed, ladend

Darstellung der Radiobuttons
Darstellung der Radiobuttons

Design Spezifikation

Figma-Link