Version:

Text field ​

Die Textfeld-Komponente ermöglicht dem Nutzer Text oder numerische Werte einzugeben.

Overview ​

Intro ​

Die Eingabefeld-Komponente ermöglicht dem Nutzer Text oder numerische Werte einzugeben. Üblicherweise ist das Eingabefeld auf einzeilige Texteingaben ausgerichtet. Es können jedoch mehrzeilige Eingaben oder Eingaben mit besonderer Schreibweise durch entsprechend konfigurierte Eingabefelder bereitgestellt werden. Text- bzw. alphanumerische Eingaben sind immer unformatiert, d. h. die reine Zeichenfolge wird erfasst.

Ein Eingabefeld sollte immer einen klaren Zweck haben, der als Label angezeigt wird (z.B. Name, Straße, PLZ, Stadt, IBAN, Telefonnummer, etc.)

broken_image
<!--
broken_image
-->

Text Field

Verwendung ​

👍 Do👎 Don't
Verwenden wenn:
- eine Erfassung von Daten in Form von Freitext oder alphanumerischen Eingaben in Formularen erfolgt.
- kurze einzeilige Daten erfasst werden müssen.		Nicht verwenden wenn:
- nur ein einfacher Anzeigetext (z. B. Textblöcke, Absätze) dargestellt werden soll.
Hierfür gibt es verschiedene Textformatierungen die Sinn machen können (siehe Typografie).
- das Standard Eingabefeld sich in einem Fließtext befinden würde (→ nicht im Fließtext verwenden)
- es eine bestimmte Anzahl an vordefinierten Optionen zur Eingabe gibt.
Hierfür ein Dropdown oder eine ComboBox verwenden.
- eingegebene Daten angezeigt werden sollen, verwende dazu Name-Wert-Facetten.
- die Eingabe vom Nutzer geregelt werden muss, verwende dazu das maskierte Eingabefeld (Utilities in der Entwicklung).
- die Nutzer Daten in bestimmten Formaten wie z.B. Geldbeträge mit Tausenderpunkten, Kreditkartennummern, IBAN oder IP Adressen eingeben sollen, verwende dazu das maskierte Eingabefeld (Utilities in der Entwicklung).
- längere Texteingaben nötig sind, verwende dazu das mehrzeilige Eingabefeld.
- Passwörter eingegeben werden sollen, verwende dazu Passwort Eingabefelder.

Guidelines ​

Anordnung & Gruppierung ​

Die Textausrichtung innerhalb der Textfelder ist standardmäßig linksbündig. Dadurch stehen das Label und der Wert räumlich und visuell nah beieinander, was das Erfassen der Eingabefelder für den Nutzer erleichtert.

Figma

Standard Textfeld

Rechts ausrichten ​

Zahlenwerte wie Währungen oder Maßeinheiten für Flächen und Volumen wie ㎡ oder Kubik Liter darstellen, müssen rechtsbündig ausgerichtet werden. Datum und Uhrzeit Werte bleiben davon unberührt und müssen weiterhin linksbündig dargestellt werden.

broken_image
Figma

Text field mit rechtsbündigem Wert

Währungen und sonstige Einheiten ​

Währungen und Einheiten sind als Suffix umzusetzen. Damit lässt sich der Wert von der Einheit besser trennen. Dadurch werden Validierungen vereinfacht und die Eingabe für den Nutzer ist einheitlich geregelt. 

Varianten/ Typen ​

Standard Text field ​

Figma

Standard Text field

Mehrzeiliges Eingabefeld (Multi-line input, Text area) ​

broken_image
Figma

Mehrzeiliges Eingabefeld

Maskiertes Text field ​

INFO

Die Maskierung erfolgt über Format Utilities in der Entwicklung.

Maskierte Text fields regeln, was Nutzer in das Text field eingeben können. Sie erleichtern den Nutzern die Eingabe in bestimmten Formaten. Zu diesen zählen z.B. Geldbeträge mit Tausenderpunkten, Kreditkartennummern, IBAN oder IP Adressen.

broken_image
Figma

Maskiertes Textfeld

Das Mate Design System bietet folgende häufig genutzte Utilities für die Maskierung beim Text Field

  • Numerische Werte mit Tausenderpunkten
  • IBAN
  • Kreditkartennummern
  • Telefonnummern
  • Uhrzeiten

Platzhalter Text ​

Der Platzhalter-Text kann verwendet werden, um das erwartete Format an den Nutzer zu kommunizieren. Sobald ein Zeichen eingegeben wird, verschwindet der Platzhalter-Text.

Formatierung ​

Die Formatierung in einem maskierten Eingabefeld erfolgt direkt während der Eingabe.

Die Formatierung kann dynamisch auf die Werte, die eingegeben werden, reagieren. So können die Formatierungen z.B. je nach Kreditkarten-Anbieter variieren.

Kreditkarten-AnbieterFormat
American Express#### ###### #####
VISA#### #### #### ####

Werte kopieren ​

Werte, die aus einem maskierten Eingabefeld kopiert werden, enthalten die Formatierung.

Wert im maskierten EingabefeldWert im Zwischenspeicher
16:54:2116:54:21
1.234,561.234,56

Wert einfügen ​

Nutzer können formatierte und unformatierte Werte in ein maskiertes Eingabefeld einfügen.

Quelle die Nutzer kopierenWert im maskierten Eingabefeld, nach dem Einfügen
4000-1234-1234-12344000 1234 1234 1234
40001234123412344000 1234 1234 1234

Verhalten ​

Bei Klick in ein Eingabefeld, wird der Cursor in dieses gesetzt und der Nutzer kann die Eingabe beginnen. Je nach Typ des Eingabefeldes (z.B. numerische Eingabe) können bestimmte Eingaben verboten werden. So wird die Häufigkeit von Fehleingaben verringert.

States ​

Ein aktives Eingabefeld kann vom Nutzer fokussiert werden und die Eingabe kann wie gewohnt erfolgen.

Die Darstellung der States Aktiv , Disabled , Read Only , Hover und Fokus entspricht der Standarddarstellung. Siehe States .

Fehlerhaft

Eingabefelder können validiert werden. Je nach Ergebnis der Validierung wird das Eingabefeld hervorgehoben. Im Fehlerzustand erscheint die Fehlermeldung unterhalb vom Eingabefeld und das Feld wird rot hervorgehoben. Die Fehlermeldung sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter Formulare .

Hilfetext

Wenn nötig, kann unterhalb des Eingabefeldes ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

Barrierefreiheit ​

Tastaturbedienung ​

Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lässt sich zwischen den einzelnen Eingabefeldern springen. In einem aktiven fokussierten Eingabefeld kann die Eingabe wie gewohnt erfolgen.

Spezifische Hinweise ​

Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches "aria-label" nötig.

Platzhalter (Placehoder) im Eingabefeld können optional zugänglich gemacht werden, indem sie im aria-label Attribut angegeben werden.

Gesperrte Eingabefelder sollten standardmäßig nicht über die Tastatur fokussierbar sein. Erst wenn der Nutzer entsprechende Einstellungen vornimmt, sollten auch die gesperrten Eingabefelder in den Fokussierungs-Kreislauf aufgenommen werden.