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 Eingabefeld 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 Input 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 Inputs 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 Input aktiv oder inaktiv ist. Bei Disabled = False ist das Input interaktiv und unterstützt Zustände wie Hover, Pressed 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.
Readonly
Die Readonly-Property gibt an, ob das Eingabefeld nur gelesen werden kann. Bei True ist die Eingabe gesperrt, und der Inhalt kann nicht bearbeitet werden. Der Standardwert ist False.
Required
Die Required-Property gibt an, ob das Input 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 Inputs 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 verschiedene Datentypen wie Text, Zahlen, Datum, URLs etc. Innerhalb des Inputfeldes können Platzhaltertexte eingesetzt werden.
Example Types
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
Size | db-sizing-fixed-md |
Padding-H | db-spacing-fixed-sm |
Spacing 1 | db-spacing-fixed-md |
Spacing 2 | db-spacing-fixed-xs |
Spacing 3 | db-spacing-fixed-2xs |
Border Radius | db-border-radius-2xs |
Icon Size | db-base-icon-font-size-md |
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 |
Kurz, Knackig, Klar
Setze die Input-Komponente ein, wenn
- Nutzer Text eingeben sollen, z. B. für Kontakt- oder Zahlungsinformationen.
- ein einzeiliges Eingabefeld benötigt wird, z. B. in Formularen oder Suchfeldern.
- spezifische Informationen direkt vom Nutzer abgefragt werden.
Guidelines to Go
- 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 Input Breite.
- Formuliere die Helper Message kurz und prägnant.
- Gebe auch bei ausgeblendetem Label immer einen Label-Text für den Screenreader an
Label & Label Text
Lege dich auf die Nutzung einer Label-Variante fest.
🟢 Nutze die selbe Label-Variante bei der Verwendung mehrerer Eingabefelder.🔴 Verwende nicht verschiedene Label-Varianten bei mehreren Eingabefeldern.
Verwende kurze und aussagekräftige Label Texte. Diese bleiben einzeilig und sollten nicht ausgepunktet werden.
🔴 Halte den Label Text kurz und prägnant. Vermeide es das Label auszupunkten.
Nutze das Inputfeld mit Hidden Label nur in absoluten Ausnahmefällen. Dabei muss zwingend ein separates Label gesetzt werden, um die Barrierefreiheit zu gewährleisten.
🟢 Nutze bevorzugt die Label Above und Floating Label Varianten.🟠 Vermeide es die Hidden Label Variante zu verwenden.
Position
Textfelder in responsiven Layouts sollten nicht die gesamte Breite eines breiten Screens einnehmen. Sie sollten eine realistische Länge des Inhalts widerspiegeln und sich dabei an den Spalten bzw. dem Layoutraster orientieren.
🟢 Die Breite des Inputs orientiert sich an einer realistischen Eingabelänge und dem Layoutraster.
🔴 Platziere Inputs nicht über die gesamte Breite des Screens.
Helper Message Text
Mit der Helper Message können den Nutzer:innen hilfreiche Informationen bereitgestellt werden, die sie bei der Eingabe unterstützen. Hier finden zum Beispiel Eingabekriterien und Formatvorgaben Platz.
🟢 Formuliere die Helper Message kurz und prägnant.🔴 Verwende keine langen, vollständigen Sätze für die Helper Message.
Validierung
Ein Inputfeld im Valid-Zustand wird durch eine grüne Färbung, sowie einem Success-Icon in der Helper Message gekennzeichnet.Ein Inputfeld im Invalid-Zustand wird durch eine rote Färbung, sowie einem Error-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