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.
🎨 Das Custom Select ist eine komplexe Komponente und in Figma mit mehreren Subcomponents aufgebaut. Bitte beachte, dass die folgenden Properties ggf. auf den Subcomponents und nicht auf erster Ebene liegen.
Variant
Das Label bietet eine klare Bezeichnung für das Custom Select Feld und zeigt an, welche Art von Information ausgewählt wird. Es wird dabei zwischen Above und Floating unterschieden. Aus Accessibility-Gründen wird die Nutzung der Above-Variante empfohlen.
Multiple
Die Multiple-Property steuert, ob mehrere Optionen gleichzeitig ausgewählt werden können (True) oder nur eine Einzelwahl möglich ist (False). Somit wird hiermit festgelegt, ob es sich um ein Multi- oder Single-Select handelt.
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.
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.
Show Icon
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.
Required
Die Required-Property gibt an, ob das Custom Select eine Pflichtangabe oder optional ist. Bei True muss eine Auswahl getroffen werden, um die Anforderungen zu erfüllen. Der Standardwert ist False.
Validation
Die Validation-Property unterstützt die Prüfung der Benutzereingabe und umfasst folgende Ausprägungen: Bei "No Validation" ist die Eingabe nicht geprüft. "Valid" bedeutet, dass die Eingabe korrekt ist und allen Anforderungen entspricht, während "Invalid" anzeigt, dass die Eingabe fehlerhaft ist und nicht den Anforderungen entspricht.
Disabled
Die Disabled-Property legt fest, ob das Custom Select aktiv oder inaktiv ist. Bei Disabled = False ist die Komponente interaktiv und unterstützt Zustände wie Hovered und Focused. Wenn Disabled = True gesetzt ist, wird das Custom Select inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist es nicht klickbar/ausfüllbar.
Form Field Width
Die Form Field Width-Property beeinflusst das dynamische Verhalten des Custom Selects. Auto sorgt dafür, dass die Breite der Komponente automatisch dem Inhalt angepasst wird, während Full das Form Field über die gesamte verfügbare Breite erstreckt. Die Property bezieht sich ausschließlich auf das Verhalten des initial angezeigten Form Fields, das Verhalten des Dropdowns wird mit der Dropdown Width-Property festgelegt.
Dropdown Width
Die Dropdown Width-Property bestimmt die Breite des Dropdowns. Bei Full orientiert sich das Dropdown an der Breite des Form Fields und füllt dessen gesamte Breite aus. Auto sorgt dafür, dass die Breite dem Inhalt, also dem längsten List Item, angepasst wird. Mit Fixed kann eine eigene Breite festgelegt werden, die sich nicht an anderen Elementen orientiert.
Placement
Die Placement-Property legt fest, wo das Dropdown relativ zum Form Field angezeigt wird. Zur Auswahl stehen folgende Optionen: bottom & top (bei Dropdown Width = full), hierbei wird das Dropdown unterhalb oder oberhalb des Formfields angezeigt und nimmt die gesamte Breite des Form Fields ein. Bottom-start, Bottom-end & Top-start, Top-end (bei Dropdown Width = auto/fixed). Falls der Platz im Browser begrenzt ist, wird automatisch eine passende Platzierung gewählt.
Selected Type
Die Selected Type-Property gibt das Format der ausgewählten Optionen, innerhalb des Form Fields, an. Hier besteht die Wahl zwischen Text, Amount und Tags. Bei Text werden die ausgewählten Optionen ausgeschrieben aufgelistet. Amount liefert eine Angabe über die Menge der ausgewählten Optionen. Tags stellt die ausgewählten Optionen einzeln als Tags dar, die dadurch direkt im Form Field wieder abgewählt werden können.
Show No Result
Mit der Show No Result-Property kann ein Hinweis innerhalb des Dropdowns angezeigt werden, wenn keine Ergebnisse anhand der Suchanfrage gefunden wurden.
Show Loading
Die Show Loading-Property zeigt eine Ladeanzeige innerhalb des Dropdowns, wenn mehrere Optionen geladen werden müssen die nicht direkt abrufbar sind.
Show Search
Mit Show Search wird festgelegt, ob im Dropdown ein Suchfeld angezeigt werden soll oder dieses ausgeblendet werden soll. Das Suchfeld eignet sich vor allem bei längeren Listen.
Show Clear Selection
Die Show Clear Selection-Property definiert, ob innerhalb des Form Fields ein Button angezeigt wird, mit dem man die gesamte Auswahl rückgängig machen kann.
Show SelectAll
Mit der Show SelectAll-Property wird eine Option zur Auswahl aller verfügbaren Optionen aktiviert. Diese Option wird oben im Dropdown angezeigt und kann bei Bedarf deaktiviert werden. SelectAll ist nur bei Multiple = True verfügbar.
Examples
Das Custom Select ist eine komplexe Komponente, mit verschiedensten Darstellungsmöglichkeiten. Hier sind ein paar weitere Beispiele für unterschiedliche Anwendungsfälle.
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Custom Select Form Field
Custom Select Dropdown
Token
Custom Select Form Field
(Default) Medium | |
|---|---|
Size | db-sizing-md |
Padding-H | db-spacing-fixed-sm |
Spacing 1 | db-spacing-fixed-sm |
Spacing 2 | db-spacing-fixed-xs |
Spacing 3 | db-spacing-fixed-2xs |
Border Radius | db-border-radius-xs |
Border Width | db-border-width-3xs |
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 |
Custom Select Dropdown
(Default) Medium | |
|---|---|
Padding-V 1 | db-spacing-fixed-md |
Padding-V 2 | db-spacing-fixed-xs |
| Padding-V 3 | db-spacing-fixed-sm |
Padding-H 1 | db-spacing-fixed-lg |
Padding-H 2 | db-spacing-fixed-sm |
Kurz, Knackig, Klar
Setze die Custom Select Komponente ein, ...
- um komplexe Auswahlmöglichkeiten in einem kompakten und flexiblen Format darzustellen
- um Mehrfach- und Einfachauswahlen mit Gruppierungen oder Suchfunktionen zu ergänzen
- wenn die native Select Komponente für deinen Anwendungsfall nicht ausreicht
Guidelines to Go
- Verwende das Custom Select, wenn die Select Komponente deine Anforderungen nicht erfüllt
- Nutze das Custom Select erst ab fünf Auswahloptionen, darunter Checkboxes bzw. Radios
- Passe die ausgewählten Optionen (Selected Type) an den Nutzungskontext an
- z.B. Tags bei häufigen Bearbeitungen, Text bei Einfachauswahl, Amount bei wenig Platz
- Setze bei Bedarf die Suche und Gruppen ein
- Achte auf eine kontextbezogene Breite
- Erkunde die verschiedenen Features und mach dich mit der Komponente vertraut
Custom Select vs. Select
Neben dem Custom Select gibt es im Design System noch die Select Komponente. Der wesentliche Unterschied zwischen den beiden Komponenten ist, dass das Select ein natives Dropdown verwendet, welches je nach Betriebssystem unterschiedlich dargestellt wird. Durch die Verwendung der nativen Komponente ist eine bessere Browser- und Plattformintegration gegeben, wodurch die Performance ggf. positiv beeinflusst wird. Das Custom Select ist komplett gestyled und bietet im Vergleich zum Select weitere Funktionalitäten wie die integrierte Suche oder die Gruppierungsmöglichkeit. Das Select ist somit ein sinnvoller Startpunkt, während das Custom Select eine deutlich komplexere Komponente für weitreichendere Anwendungsfälle ist.
🟢 Verwende das Custom Select für komplexere Anwendungsfälle.🟢 Verwende für einfache Anwendungsfälle die Select Komponente.
Custom Select vs. Radio & Checkbox
Die Auswahl der Optionen innerhalb des Custom Selects basiert jeweils auf der Funktionalität von Radios (Multiple = False) und Checkboxes (Multiple = True). Das Custom 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 Radios und Checkboxes besser, da alle Optionen auf einmal sichtbar sind und Nutzer:innen direkt wählen können, ohne ein Dropdown-Menü öffnen zu müssen.
🟢 Nutze das Custom Select ab fünf Auswahloptionen.🔴 Bei weniger als fünf Auswahloptionen sollten Radios / Checkboxes genutzt werden.
Mehrfach- und Einfachauswahl
Das Custom Select bietet sowohl eine Mehrfach- (Multiple = True) als auch Einfachauswahl (Multiple = False). Mit der Mehrfachauswahl können mehrere Optionen ausgewählt werden, analog zum Checkbox Verhalten. Die Einfachauswahl verhält sich analog zu Radios und ermöglicht die Auswahl einer Option.
🟢 Nutze Multiple = True, wenn mehrere Optionen ausgewählt werden sollen.🔴 Nutze Multiple = True nicht, wenn nur eine Auswahl getätigt werden soll.
Ausgewählte Optionen
Mit der Selected Type-Property lassen sich die ausgewählten Optionen auf verschiedene Arten innerhalb des Form Fields anzeigen. Hierbei gilt es darauf zu achten, die Art an den entsprechenden Nutzungskontext anzupassen.Ist beispielsweise zu erwarten, dass häufig Optionen wieder abgewählt werden müssen, eignen sich die Tags, durch den integrierten Remove-Button. Hier kann nur der Tag ohne Icons eingesetzt werden.Wenn der Platz allerdings beschränkt ist, z.B. in Tabellen, eignet sich die Amount Variante besser.Die Text Variante eignet sich hingegen z.B. bei einer Einfachauswahl gut, damit der User ohne zusätzliche Interaktion die ausgewählte Option überprüfen kann.
🟢 Verwende die Tags, wenn eine Mehrfachauswahl nachträglich häufig bearbeitet wird.🔴 Verwende bei den Tags nur die reine Text-Variante und setze keine Icons oder andere Inhalte über den Slot ein.🔴 Nutze bei einer Einfachauswahl nicht den Amount Type, hier eignet sich Text oder Tags besser.
Suchfunktion
Die Suche innerhalb des Dropdown ermöglicht es den Nutzenden schneller einzelne Optionen aus einer längeren Liste zu finden. Ab 10 Auswahlmöglichkeiten ist die Suche automatisch aktiv, sie kann allerdings bei Bedarf auch bei weniger Optionen gesetzt werden oder ausgeblendet werden.
🟢 Nutze die Suchfunktion um eine schnellere Nutzereingabe zu ermöglichen.🔴 Vermeide es, bei sehr langen Listen die Suche auszublenden.
Gruppierung
Um innerhalb einer langen Liste an Auswahlmöglichkeiten den Nutzenden eine bessere Übersicht zu bieten, können die Inhalte auf verschiedene Arten gruppiert werden. Je nach Kontext und Anwendungsfall können Group Title genutzt werden oder Divider innerhalb der Optionen um platzsparend zu strukturieren. Hierbei sollte eine sinnvolle Struktur gewahrt werden und ausschließlich innerhalb der Liste Gruppen erstellt werden. SelectAll funktioniert übergreifend zur Auswahl aller Optionen und darf nicht verändert werden.
🟢 Nutze Gruppentitel für eine übersichtliche Zusammenfassung von Optionen.🟢 Nutze Divider zur Gruppierung um platzsparend zu strukturieren.🔴 Setze unter SelectAll keinen zusätzlichen Divider.
Breite
Die Breite des Custom Selects sollte immer realistische Länge des Inhalts widerspiegeln, hierfür liegen sowohl für das Form Field als auch das Dropdown verschiedene Verhalten vor.Die Mindestbreite des Custom Selects richtet sich nach den eingebauten Features. Für geringere Breiten kann im Form Field bspw. der Clear Selection Button deaktiviert werden. Im Dropdown wird die Mindesbreite kleiner, wenn die Suche deaktiviert wird. Es sollte immer darauf geachtet werden, dass für die Nutzenden alle wichtigen Informationen sichtbar sind.
🟢 Passe die Breite an den entsprechenden Nutzungskontext an.🔴 Unterschreite nicht die Mindestbreite und achte darauf, dass alle wichtigen Informationen sichtbar sind.
Sprachverwendung
Innerhalb von DB Anwendungen gilt Deutsch als Standardsprache. Im Design System werden auf technischer Grundlage englische Bezeichnungen verwendet. Hierbei gilt es, die vorhandenen Platzhalter Texte an die entsprechende Projektumgebung anzupassen.
🟢 Passe die Platzhalter Texte an deine Projektumgebung an.🔴 Verwende in einem deutschen Sprachumfeld nicht die englischen Platzhalter.
Validierung
Das Custom Select im Invalid-Zustand wird durch eine rote Färbung, sowie einem Error-Icon in der Helper Message gekennzeichnet. Der Valid-Zustand wird durch eine grüne Färbung, sowie einem Success-Icon in der Helper Message gekennzeichnet. Die positive Validierung in Form der Success-Meldung ist optional. Invalid hingegen ist zwingend notwendig um den Nutzenden eine falsche oder fehlende Eingabe zu signalisieren.
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.
Gebe auch bei ausgeblendetem Label immer einen Label Text an!
Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂
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