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 an, ob das Radio-Element aktiviert (ausgewählt) ist. Bei True ist es aktiviert, bei False nicht. Der Standardwert ist False.
Disabled
Die Disabled-Property legt fest, ob der Radio Button aktiv oder inaktiv ist. Bei Disabled = False ist der Radio Button interaktiv und unterstützt Zustände wie Hover, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird der Radio Button inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist er nicht klickbar.
Required
Die Required-Property gibt an, ob der Radio Button eine Pflichtangabe oder optional ist. Bei True muss das Element aktiviert sein, um die Anforderungen zu erfüllen. Der Standardwert ist False.
Validation
Die Validation-Property gibt den Validierungszustand des Radio Buttons 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 des Radio Buttons. Hierbei kann zwischen Medium und Small gewählt werden.
Show Label
Die Label-Property gibt an, ob der Radio Button mit einer Beschriftung versehen ist. Bei True wird ein Label angezeigt, bei False wird der Radio Button 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 | |
|---|---|---|
Size | db-sizing-fixed-2xs | db-sizing-fixed-3xs |
Spacing | db-spacing-fixed-xs | db-spacing-fixed-2xs |
Border Radius | db-border-radius-full | db-border-radius-full |
Border Height | db-border-height-2xs | db-border-height-2xs |
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 |
Kurz, Knackig, Klar
Setze die Radio-Komponente ein, wenn
- Benutzer eine einzelne Auswahl aus einer Liste treffen sollen.
- eine exklusive Auswahl in Formularen oder Einstellungen erforderlich ist.
- sichergestellt werden soll, dass nur eine Option gewählt werden kann.
Guidelines to Go
- Radio für sich gegenseitig ausschließende Optionen
- Checkboxen für die Auswahl mehrerer Optionen
- Halte das Label kurz und prägnant.
- Radio Buttons werden im Normalfall vertikal angeordnet.
- Gebe auch bei ausgeblendetem Label immer einen Label-Text für den Screenreader an
Radio oder Checkbox?
Nutze den Radio Button für sich gegenseitig ausschließende Optionen.
🟢 Verwende die Radio Komponente für eine Einfach-Auswahl mit sich gegenseitig ausschließenden Optionen.🔴 Vermeide es Radio-Groups zu verschachteln.
Nutze die Checkbox anstelle des Radios für die Auswahl mehrerer Optionen.
🟢 Verwende die Checkbox für eine Mehrfach-Auswahl.🔴 Nutze den Radio nicht für eine Mehrfach-Auswahl.
Label Text
Halte das Label kurz und prägnant.
Positionierung
Vermeide es, Radio Buttons horizontal anzuordnen. Wenn möglich sollte eine Radio Group aus vertikal angeordneten Radio Buttons bestehen.
🟢 Ordne Radio Buttons innerhalb einer Radio Group vertikal an.🟠 Vermeide es, Radio Buttons horizontal anzuordnen.
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 der Radio Button nicht barrierefrei genutzt werden.
Gib immer einen 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