🔴 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.)

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

Links ausrichten (Standard)

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.

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.

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

Standard Text field

Mehrzeiliges Eingabefeld (Multi-line input, Text area)

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.

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-Anbieter	Format
American Express	#### ###### #####
VISA	#### #### #### ####

Werte kopieren

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

Wert im maskierten Eingabefeld	Wert im Zwischenspeicher
16:54:21	16:54:21
1.234,56	1.234,56

Wert einfügen

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

Quelle die Nutzer kopieren	Wert im maskierten Eingabefeld, nach dem Einfügen
4000-1234-1234-1234	4000 1234 1234 1234
4000123412341234	4000 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.

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-text-field--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252FtextField

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-text-field-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.textfield.TextField;

Variants

Default

TextField textField = new TextField();
textField.setLabel("Name");
textField.setValue("Max Mustermann");
textField.setHelperText("Vor- und Nachname eingeben");
textField.setClearButtonVisible(true);

Required

TextField textField = new TextField();
textField.setLabel("Pflichtfeld");
textField.setRequired(true);

Disabled

TextField textField = new TextField();
textField.setLabel("Inaktiv");
textField.setValue("Nicht editierbar");
textField.setEnabled(false);

Read Only

TextField textField = new TextField();
textField.setLabel("Nur lesen");
textField.setValue("Schreibgeschützter Wert");
textField.setReadOnly(true);

Invalid

TextField textField = new TextField();
textField.setLabel("Ungültig");
textField.setInvalid(true);
textField.setErrorMessage("Bitte einen gültigen Wert eingeben.");