Navigieren auf digital.sbb.ch

Beta

Checkbox

1. Was macht das Element?

  • Dient zur Eingabe von Ja/Nein-Werten.

2. Wann soll das Element eingesetzt werden?

  • Beim Auswählen einer oder mehrerer, zueinander unabhängigen Optionen.

3. Regeln

  • Eine Vorauswahl ist Pflicht (aktiv oder inaktiv, kein Tristate).
  • Mehrere Checkboxen können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer die Auswahlmöglichkeiten schneller erfassen.
  • Horizontal Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
  • Der Text kann mehrzeilig sein.
  • Nebst der eigentlich Checkbox dient auch der gesamte Text als Click-Target.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

  • Selected
  • Unselected
  • Indeterminate
  • Disabled Selected
  • Disabled Unselected
  • Disabled Indeterminate
  • Loading

Das Element hat folgende Ausprägungen:

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

4.1 Checkbox

4.1.1 ohne Icon

Darstellung der Checkboxs
Darstellung der Checkboxs

4.1.2 mit Icon

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2 Checkbox-Item

4.2.1 Liste

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.2 Liste, mit Icons (links und rechts)

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.3 Liste, mit Subtext

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.4 Liste, mit Button

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.5 Liste, ladend

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.6 Boxed

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.7 Boxed, mit Icons (links und rechts)

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.8 Boxed, mit Subtext

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.9 Boxed, mit Button

Darstellung der Checkboxs
Darstellung der Checkboxs

4.2.10 Boxed, ladend

Darstellung der Checkboxs
Darstellung der Checkboxs

Design Spezifikation

Figma-Link