Properties
Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.
(Default) False, True | |
(Default) False, True | |
(Default) False, True | |
(Default) No Validation, Invalid, Valid | |
(Default) Medium, Small | |
(Default) True, False |
Checked
Die Checked-Property gibt den aktuellen Zustand der Checkbox an. Bei True ist die Checkbox aktiviert (ausgewählt), bei False ist sie deaktiviert (nicht ausgewählt). Der Standardwert ist False.
Indeterminate
Die Indeterminate-Property gibt an, ob die Checkbox einen unbestimmten Zustand darstellt, z. B. bei einer teilweisen Auswahl. Bei True wird der Indeterminate-Zustand angezeigt, ohne den Wert von Checked zu ändern. Der Standardwert ist False.
Disabled
Die Disabled-Property legt fest, ob die Checkbox aktiv oder inaktiv ist. Bei Disabled = False ist die Checkbox interaktiv und unterstützt Zustände wie Hover, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird die Checkbox inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist sie nicht klickbar.
Required
Die Required-Property gibt an, ob die Checkbox eine Pflichtangabe oder optional ist. Bei True muss die Checkbox aktiviert sein, um die Anforderungen zu erfüllen. Der Standardwert ist False.
Validation
Die Validation-Property gibt den Validierungszustand der Checkbox an. Der Standardwert ist No Validation. Bei Valid ist die Eingabe korrekt, bei Invalid ist die Eingabe fehlerhaft und es sollte eine entsprechende Fehlermeldung angezeigt werden, um die Barrierefreiheit zu gewährleisten.
Size
Die Size-Property bestimmt die physikalische Größe der Checkbox. Hierbei kann zwischen Medium und Small gewählt werden.
Show Label
Die Label-Property gibt an, ob die Checkbox mit einer Beschriftung versehen ist. Bei True wird ein Label angezeigt, bei False wird die Checkbox ohne Beschriftung dargestellt. Der Standardwert ist True. Wenn False gesetzt ist, sollte sicherstellen werden, dass eine alternative Beschriftung für Barrierefreiheit bereitgestellt wird.
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
(Default) Medium | Small | |
|---|---|---|
| Spacing 1 | db-spacing-fixed-xs | db-spacing-fixed-2xs |
| Spacing 2 | db-spacing-fixed-2xs | db-spacing-fixed-2xs |
| Border Radius | db-border-radius-3xs | db-border-radius-3xs |
| Icon Size | db-base-icon-font-size-md | db-base-icon-font-size-sm |
| Text Size | db-type-body-md-regular | db-type-body-sm-regular |
| Border Height | db-border-height-2xs | db-border-height-2xs |
Kurz, Knackig, Klar
Setze die Checkbox-Komponente ein, wenn
- eine Auswahl getroffen werden soll, z. B. für Filter oder Optionen in Formularen.
- eine Massenbearbeitung durchgeführt werden soll, wie das Auswählen mehrerer Elemente.
- eine Zustimmung erforderlich ist, z. B. zur Bestätigung von AGBs oder Vereinbarungen.
Guidelines to Go
- Checkbox für die Auswahl mehrerer Optionen gleichzeitig
- Radio für die Auswahl sich gegenseitig ausschließender Optionen
- Label soll kurz und prägnant sein
- Vermeide negative Formulierungen
- Gebe auch bei ausgeblendetem Label immer einen Label-Text für den Screenreader an
Checkbox? Radio?
Innerhalb einer Checkbox-Group können mehrere Optionen gewählt werden. Für sich gegenseitig ausschließende Optionen nutze den Radio Button.
🟢 Verwende für eine Mehrfach-Auswahl die Checkbox und für eine Einfach-Auswahl die Radio Komponente.🔴 Die Checkbox sollte nicht für die Einfach-Auswahl, mit sich ausschließenden Optionen, genutzt werden.
Label Text
Halte das Label kurz und prägnant. Vermeide negative Formulierungen, die zu Verwirrungen führen könnten.
🟢 Formuliere den Labeltext kurz und prägnant.🔴 Verwende keine doppelten Verneinungen oder negativen Formulierungen.
Accessibility
Screenreader Text
Achte darauf, dass der Label-Text immer mit an die Entwicklung übergeben wird, auch wenn das visuelle Label ausgeblendet ist (Label = false). Ohne die Angabe des Screenreader-Texts kann die Checkbox nicht barrierefrei genutzt werden.
Gebe immer ein Label Text an, auch wenn das Label ausgeblendet ist
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter