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 die Textarea 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 die Textarea 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 der Textarea 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 die Textarea 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 die Textarea 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 der Textarea 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 der Textarea 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.
Rows
Standardmäßig ist die Höhe der Textarea so angelegt, dass vier Zeilen Text angezeigt werden. Nach Bedarf kann die Höhe auf eine andere Zeilenanzahl angepasst werden. Die Rows beziehen sich hierbei nur auf die Ausgangsgröße der Komponente und beeinflussen nicht das Resizing, durch die Nutzenden, über den Handle in der unteren rechten Ecke.
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
Padding-V | db-spacing-fixed-xs | |
Padding-H | db-spacing-fixed-sm | |
Spacing 1 | db-spacing-fixed-xs | |
Spacing 2 | db-spacing-fixed-2xs | |
Border Radius | db-border-radius-xs | |
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 | |
Boarder Height | db-border-height-3xs | |
Textarea Height | design-textarea-height | Default Input Text: 4 Lines |
Kurz, Knackig, Klar
Setze die Textarea-Komponente ein, wenn
- Nutzer mehrzeiligen Text eingeben sollen, z. B. bei der Eingabe von Kommentaren, Nachrichten oder Feedback
- längere Inhalte eingegeben werden müssen
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 Textarea Breite.
- Formuliere die Helper Message kurz und prägnant.
- Gebe auch bei ausgeblendetem Label immer einen Label-Text für den Screenreader an
Label
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.
Nutze die Textarea 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.
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.
Breite
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 der Eingabefelder orientiert sich an einer realistischen Eingabelänge und dem Layoutraster.
🔴 Platziere Eingabefelder nicht über die gesamte Breite des Screens.
Höhe
Die initiale Höhe der Textarea und das damit einhergehende Verhalten richtet sich nach der “Field Size” Property. Standardmäßig hat die Textarea eine fixe Höhe von vier Textzeilen. Bei der Variante “Content”, zeigt die Textarea inital nur eine Zeile an und wächst in der Höhe mit, wenn mehr Text eingegeben wird. Die Variante muss entsprechend des Einsatzzweckes ausgewählt werden.
🟢 Nutze die Fixed Variante um Formulare übersichtlich zu halten.🟢 Nutze die Content Variante um initial Platz zu sparen und mehr Informationen darzustellen.
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
Eine Textarea im Valid-Zustand wird durch eine grüne Färbung, sowie einem Success-Icon in der Helper Message gekennzeichnet.Eine Textarea 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 die Textarea 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