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. 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
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Tristate: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
- Disabled Tristate: Light, Dark
4.1.2 Ohne Icon (vor Label)
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Tristate: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
- Disabled Tristate: Light, Dark
4.1.3 Ohne Call to Action
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Tristate: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
- Disabled Tristate: Light, Dark
4.1.4 Nur Checkbox und Label
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Tristate: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
- Disabled Tristate: Light, Dark
4.2 Mit Preis
4.2.1 Default
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.2 Ohne Icon (vor Label)
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.3 Ohne Spar-Icon
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.4 Nur Checkbox, Label und Preis
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.3 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
Design Spezifikation
4.2 Horizontale Anordnung
