Navigieren auf digital.sbb.ch

Beta

Checkbox

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English

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. Bei vertikaler Anordnung soll die Variante "volle Breite" oder "mit Preis" genutzt werden. Für die horizontale Anordung soll die Variante "dynamische Breite" genutzt werden.
  • Horizontale 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.
  • Checkboxen werden immer mit einer Form-Group (Link) gruppiert und sind somit immer auf einem weissen Hintergrund gesetzt.
  • Das letzte Element (Checkbox, volle Breite) innerhalb einer Form-Group hat jeweils keinen Boarder.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

  • Checked
  • Unchecked
  • Tristate
  • Disabled Checked
  • Disbaled Unchecked
  • Disabled Tristate

Das Element hat folgende Ausprägungen:

  • volle Breite
  • mit Preis
  • dynamische Breite

4.1 Volle Breite

4.1.1 Default

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

4.1.2 Ohne Icon (vor Label)

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

4.1.3 Ohne Call to Action

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

4.1.4 Nur Checkbox und Label

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

4.2 Mit Preis

4.2.1 Default

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

4.2.2 Ohne Icon (vor Label)

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

4.2.3 Ohne Spar-Icon

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

4.2.4 Nur Checkbox, Label und Preis

Darstellung der Checkboxen, mit Preis, default
Darstellung der Checkboxen, 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 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:

Das Element hat folgende Ausprägungen:

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

4.1 Vertikale Anordnung

Darstellung der Checkboxen, vertikale Anordnung
Darstellung der Checkboxen, vertikale Anordnung, mit Infos

Design Spezifikation

4.2 Horizontale Anordnung

Darstellung der Checkboxen, horizontale Anordnung

Design Spezifikation