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.
Variant
Das Label bietet eine klare Bezeichnung für das Select Feld und zeigt an, welche Art von Information erwartet wird. Es wird dabei zwischen Above und Floating unterschieden. Aus Accessibility-Gründen wird die Nutzung der Above-Variante empfohlen.
Show Label
Die Label-Property gibt an, ob das Select mit einer Beschriftung versehen ist. Bei True wird ein Label angezeigt, bei False wird das Input ohne Beschriftung dargestellt. Der Standardwert ist True. Wenn False gesetzt ist, sollte sicherstellen werden, dass eine alternative Beschriftung für Barrierefreiheit bereitgestellt wird.
State
Die State-Property gibt den aktuellen Zustand des Selects an. Bei Empty ist das Feld leer, bei Filled wurde bereits eine Eingabe gemacht. Der Standardwert ist Empty.
Disabled
Die Disabled-Property legt fest, ob das Select aktiv oder inaktiv ist. Bei Disabled = False ist das Select interaktiv und unterstützt Zustände wie Hover und Focused. Wenn Disabled = True gesetzt ist, wird das Input inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist es nicht klickbar/ausfüllbar.
Required
Die Required-Property gibt an, ob das Select 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 Selects 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.
Show Message
Die Show-Message-Property gibt an, ob ein Infotext unterhalb des Eingabefelds angezeigt wird. Bei True wird der Text dargestellt, bei False nicht. Der Standardwert ist False. Die Message wird häufig für Validation, Hilfestellungen oder Hinweise verwendet, um dem Benutzer zusätzliche Informationen zur Eingabe zu geben.
Content
Die Content-Property beschreibt die Art der Daten oder Informationen, die in das Inputfeld eingegeben werden können. Dies umfasst Textinhalte sowie ein optionales vorangestelltes Icon.
Examples Floating Label
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
(Default) Medium | |
|---|---|
Size | db-sizing-fixed-md |
Padding-H | db-spacing-fixed-md |
Spacing 1 | db-spacing-fixed-xs |
Spacing 2 | db-spacing-fixed-2xs |
Spacing 3 | db-spacing-fixed-sm |
Border Radius | db-border-radius-xs |
Icon Size | db-base-icon-font-size-sm |
Text Size 1 | db-type-body-xs-regular |
Text Size 2 | db-type-body-md-regular |
Text Size 3 | db-type-body-2xs-regular |
Text Size 4 | db-type-body-sm-regular |
| Border | db-border-height-3xs |
Kurz, Knackig, Klar
Setze die Select Komponente ein, um
- eine Auswahl zwischen mehreren Optionen zu ermöglichen
- die Auswahl aus langen Listen kompakt darzustellen, ohne das Layout überladen wirken zu lassen
- aus langen Listen schnell die gewünschte Auswahl zu finden
Guidelines to Go
- Nutze die Select Komponente ab fünf Auswahlmöglichkeiten.
- Verwende kurze, prägnante und einzeilige Label Texte.
- Hidden Label sollte nur in Ausnahmefällen verwendet werden. Setze ein separates Label.
- Achte auf ein ausgewogenes und realistisches Verhältnis zwischen Screenbreite und Select Breite.
- Formuliere die Helper Message kurz und prägnant.
- Gib auch bei ausgeblendetem Label immer einen Label-Text für den Screenreader an
Dropdown
Wir nutzen die Native Dropdowns, weshalb es je nach Betriebssystem zu unterschiedlichen Darstellungen kommen kann. Im Entwicklungsmodus besteht die Möglichkeit, eine Auswahl im Dropdown wieder aufzuheben, sofern ein Placeholder oder ein Floating Label vorhanden ist. Dafür wird im Dropdown eine Leerzeile angezeigt, über die der Auswahlstatus zurückgesetzt werden kann.
Native Dropdowns sehen je nach Betriebssystem unterschiedlich aus.Bei vorhandenem Placeholder oder Floating Label ermöglicht eine Leerzeile im Dropdown das Aufheben der Auswahl.
Auswahlmöglichkeiten
Das Select sollte verwendet werden, wenn die Anzahl der Auswahlmöglichkeiten größer ist als das, was sinnvoll auf dem Bildschirm angezeigt werden kann, ohne die Benutzeroberfläche zu überfüllen. Dies gilt in der Regel ab fünf Optionen. Für eine Auswahl aus weniger Optionen eignen sich Radio Buttons besser, da alle Optionen auf einmal sichtbar sind und Nutzer:innen direkt wählen können, ohne ein Dropdown-Menü öffnen zu müssen.
🟢 Ab fünf Auswahlmöglichkeiten eignet sich die Select Komponente.🔴 Vermeide es weniger als fünf Optionen in Form eines Selects anzubieten. Hierfür eignen sich Radio Buttons.
Einsatz Label
Lege dich auf die Nutzung einer Label-Variante innerhalb des Formulars fest.
🟢 Nutze für Input-Felder und Select-Felder die selben Labels.🔴 Vermeide es, unterschiedliche Labels innerhalb des Formulars zu nutzen.
Verwende kurze und aussagekräftige Label Texte. Diese bleiben einzeilig und sollten nicht ausgepunktet werden.
🔴 Vermeide es, unnötig lange Labeltexte zu nutzen.
Nutze die Select-Komponente mit Hidden Label nur in absoluten Ausnahmefällen. Die Nutzung des Hidden Labels ist aufgrund des verschwindenden Labels bei Texteingabe aus Accessibility-Sicht sehr kritisch.
🟢 Wir empfehlen aus Accessibility-Gründen die Nutzung des Label Above.🔴 Vermeide es, das Hidden Label zu nutzen, da nach Auswahl einer Option kein Label mehr angezeigt wird.
Breite
Select-Felder in responsiven Layouts sollten nicht die gesamte Breite eines breiten Screens (Tablet und Desktop) einnehmen. Sie sollten eine realistische Länge des Inhalts widerspiegeln und sich dabei an den Spalten bzw. dem Layoutraster orientieren.
🔴 Platziere Select Felder nicht über die gesamte Breite des Screens.
🟢 Die Breite des Select Felds orientiert sich an einer realistischen Eingabelänge und dem Layoutraster.
Helper Message Text
Formuliere die Helper Message kurz und prägnant.
Validierung
Ein Select-Feld im Invalid-Zustand wird durch eine rote Färbung, sowie einem Error-Icon in der Helper Message gekennzeichnet. Ein Select-Feld im Valid-Zustand wird durch eine grüne Färbung, sowie einem Success-Icon in der Helper Message gekennzeichnet.
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 das Input 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