Navigieren auf digital.sbb.ch

Beta
Zur Startseite von digital.sbb.ch

Radiobutton-❌

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English

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.
  • Für detaillierte Erklärungen kann neben dem Label ein Icon dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein .
  • Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer 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
  • Disbaled Unchecked

Das Element hat folgende Ausprägungen:

  • volle Breite
  • mit Preis
  • dynamische Breite

4.1 Volle Breite

4.1.1 Default

Darstellung der Radiobuttons, volle Breite, default
Darstellung der Radiobuttons, volle Breite, default
Design Spezifikation

4.1.2 Ohne Icon (vor Label)

Darstellung der Radiobuttons, volle Breite, ohne Icon
Darstellung der Radiobuttons, volle Breite, ohne Icon
Design Spezifikation

4.1.3 Ohne Call to Action

Darstellung der Radiobuttons, volle Breite, ohne Call to Action
Darstellung der Radiobuttons, volle Breite, ohne Call to Action
Design Spezifikation

4.1.4 Nur Radiobutton und Label

Darstellung der Radiobuttons, volle Breite, nur Checkbox und Label
Darstellung der Radiobuttons, volle Breite, nur Checkbox und Label
Design Spezifikation

4.2 Mit Preis

4.2.1 Default

Darstellung der Radiobuttons, mit Preis, default
Darstellung der Radiobuttons, mit Preis, default
Design Spezifikation

4.2.2 Ohne Icon (vor Label)

Darstellung der Radiobuttons, mit Preis, default
Darstellung der Radiobuttons, mit Preis, default
Design Spezifikation

4.2.3 Ohne Spar-Icon

Darstellung der Radiobuttons, mit Preis, default
Darstellung der Radiobuttons, mit Preis, default
Design Spezifikation

4.2.4 Nur Radiobutton, Label und Preis

Darstellung der Radiobuttons, mit Preis, default
Darstellung der Radiobuttons, mit Preis, default
Design Spezifikation

4.3 Dynamische Breite

Darstellung der Checkboxen, dynamische Breite
Darstellung der Checkboxen, dynamische Breite
Design Spezifikation

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.
  • Für detaillierte Erklärungen kann neben dem Label ein Icon dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein .
  • Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer 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:

Das Element hat folgende Ausprägungen:

  • mit Info (nur bei vertikaler Ausrichtung)
  • ohne Info
  • vertikal ausgerichtet
  • horizontal ausgerichtet

4.1 Vertikale Anordnung

Darstellung der Radiobuttons, vertikale Anordnung, mit Info
Darstellung der Radiobuttons, vertikale Anordnung, ohne Info

Design Spezifikation

4.2 Horizontale Anordnung

Darstellung der Radiobuttons, horizontale Anordnung

Design Spezifikation