Password Field

Das Password Field ist ein Eingabefeld zur Eingabe von Passwörtern.

Overview

Intro

Das Password Field ermöglicht dem Nutzer die Eingabe eines Passworts. Üblicherweise wird es in Formularen verwendet, in denen ein Passwort gesetzt oder bestätigt werden soll, z.B. bei Anmeldung, Registrierung oder Passwortänderung.

Die Eingabe wird standardmäßig maskiert dargestellt. Auf mobilen Geräten wird das zuletzt eingetippte Zeichen kurz angezeigt, bevor es maskiert wird. Über den Reveal button kann der Nutzer die Maskierung aufheben und den eingegebenen Wert lesen.

Das Password Field ist eine Erweiterung des Text Field und übernimmt dessen Bestandteile und Validierungsmechanik.

Verwendung

👍 Do	👎 Don't
... wenn ein Passwort erfasst werden soll (z.B. bei Anmeldung, Registrierung oder Passwortänderung).	... wenn ein Freitext oder eine alphanumerische Eingabe erfasst werden soll, verwende dazu das Text Field ... wenn ein längerer, mehrzeiliger Text erfasst werden soll, verwende dazu die Text Area ... wenn eine E-Mail-Adresse erfasst werden soll, verwende dazu das Email Field ... wenn ein numerischer Wert schrittweise angepasst werden soll, verwende dazu das Number Field

Guidelines

Aufbau

Das Password Field setzt sich aus folgenden Bestandteilen zusammen. Label und Eingabefeld sind immer vorhanden, der Reveal button ist standardmäßig eingeblendet; die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Label — kennzeichnet das Feld. Für die Barrierefreiheit erforderlich. Unterstützt Plaintext-Inhalt; die Länge ist durch die Breite des Feldes begrenzt.
• Eingabefeld — nimmt das Passwort auf, das der Nutzer eintippt. Der Wert wird maskiert dargestellt, solange er nicht über den Reveal button aufgedeckt ist.
• Reveal button — hebt die Maskierung auf und zeigt den eingegebenen Wert im Klartext. Kann ausgeblendet werden, wenn dieses Verhalten nicht erwünscht ist.
• Helper text (optional) — erscheint unterhalb des Feldes. Geeignet, um die Passwortanforderungen zu kommunizieren (z.B. Mindestlänge, erforderliche Zeichenarten). Eine Style-Variante erlaubt die Darstellung oberhalb des Feldes.
• Placeholder (optional) — wird angezeigt, solange das Feld leer ist. Nur einzusetzen, wenn kein Helper text möglich ist. Platzhalter sind kein Ersatz für ein sichtbares Label, da sie für einen bereits eingegebenen Wert gehalten werden können.
• Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
• Prefix (optional) — wird am Anfang des Feldes dargestellt. Ein Schloss-Icon ist die übliche Wahl.
• Suffix (optional) — wird am Ende des Feldes dargestellt, vor dem Clear button und dem Reveal button.
• Clear button (optional) — erscheint, sobald das Feld nicht leer ist, und löscht den aktuellen Wert. Der Button selbst ist nicht tastaturfokussierbar; bei fokussiertem Feld löscht die Escapetaste den Wert. In Such- und Filterfeldern nützlich, in regulären Formularen weniger.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Die Anordnung des Password Field im Formular, seine Breite und seine Spaltenbelegung sind im Form Layout geregelt.

Info für Dev

In Web Components hat jedes Eingabefeld ein eigenes Paket und ein eigenes Element: @vaadin/text-field, @vaadin/text-area, @vaadin/email-field, @vaadin/password-field und @vaadin/number-field. Alle fünf sind in @mate/bundles enthalten.

In Vue liegt ebenfalls jedes Feld in einem eigenen Paket: @mate-vue/text-field, @mate-vue/text-area, @mate-vue/email-field, @mate-vue/password-field und @mate-vue/number-field, mit den Komponenten MateTextField, MateTextArea, MateEmailField, MatePasswordField und MateNumberField.

In Flow stammen alle Klassen aus einem einzigen Maven-Artefakt vaadin-text-field-flow und dem Paket com.vaadin.flow.component.textfield. Jede Klasse wird trotzdem einzeln importiert.

Verhalten

Der Nutzer tippt das Passwort direkt in das Feld ein. Jedes eingegebene Zeichen wird durch ein Maskierungszeichen ersetzt; auf mobilen Geräten bleibt das zuletzt eingetippte Zeichen kurz sichtbar. Die automatische Großschreibung ist abgeschaltet, damit die Eingabe unverändert übernommen wird.

Verlässt der Fokus das Feld, wird der Wert wieder maskiert — auch dann, wenn der Nutzer die Maskierung zuvor über den Reveal button aufgehoben hat.

Der aktuelle Wert lässt sich über den Clear button löschen. Ist der Clear button aktiviert, das Feld fokussiert und nicht auf Read Only gesetzt, löscht auch die Escapetaste ( Esc ) den Wert.

Reveal button

Der Reveal button hebt die Maskierung auf und zeigt den eingegebenen Wert im Klartext. Ein erneutes Betätigen maskiert den Wert wieder. Er ist standardmäßig sichtbar und besonders auf mobilen Geräten hilfreich, wo die Eingabe fehleranfälliger ist.

Der Reveal button kann ausgeblendet werden. Er ist dann weder mit der Maus noch mit der Tastatur erreichbar; der Nutzer kann seine Eingabe nicht mehr prüfen.

Validierung

Die Validierung erfolgt, wenn der Nutzer eine Wertänderung auslöst, z.B. durch Eingabe und Drücken von Enter . Spätestens beim Verlassen des Feldes wird geprüft, auch wenn der Wert unverändert geblieben ist. Ist der Wert ungültig, wird das Feld rot hervorgehoben und eine Fehlermeldung erscheint unterhalb des Eingabefeldes. Ist das Feld bereits ungültig, wird bei jeder weiteren Eingabe erneut geprüft, sodass die Meldung beim Korrigieren sofort verschwindet.

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Folgende Constraints werden unterstützt:

Constraint	Verhalten
Required	Das Feld wird ungültig, wenn der Wert zunächst eingegeben und anschließend gelöscht wird.
Min / Max length	Die Mindestlänge löst einen Validierungsfehler aus, wenn ein kürzerer Wert eingegeben wird. Die Maximallänge begrenzt die Anzahl der Zeichen, die eingegeben werden können.
Pattern	Ein regulärer Ausdruck, gegen den der vollständige Wert geprüft wird. Damit wird eine Passwortrichtlinie technisch durchgesetzt.
Allowed characters	Ein regulärer Ausdruck für einzelne Zeichen kann einschränken, welche Zeichen eingegeben werden dürfen. Zeichen, die nicht dem Ausdruck entsprechen, werden abgewiesen. Programmatisch gesetzte Werte unterliegen dieser Einschränkung nicht.

Jedes Constraint sollte eine eigene Fehlermeldung haben, damit der Nutzer spezifisches, umsetzbares Feedback erhält. Die Passwortanforderungen werden zusätzlich proaktiv über den Helper text kommuniziert — bevor der Nutzer einen Fehler macht, nicht erst danach.

States

Das Password Field unterstützt die Standard-Eingabefeld-States. Visuell folgen sie der gleichen Darstellung wie beim Rest der Mate DS Eingabefeld-Familie — das Password Field benötigt keine eigenen State-Darstellungen.

• Default — leer und bearbeitbar; der Reveal button ist sichtbar.
• Filled — das Feld enthält einen Wert, der maskiert dargestellt wird.
• Error — das Feld ist rot hervorgehoben und eine Fehlermeldung erscheint unterhalb des Eingabefeldes. Wird ausgelöst, wenn ein Validierungs-Constraint verletzt wird. Die Fehlermeldung sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter Formulare .

Die Darstellung der States Enabled , Disabled , Read Only , Hover und Focus entspricht der Standarddarstellung. Siehe States .

Barrierefreiheit

Tastaturbedienung

Über die Tabulatortaste ( Tab ) oder Hochstell- und Tabulatortaste ( Shift + Tab ) lässt sich zwischen den einzelnen Eingabefeldern springen. In einem fokussierten Password Field im State Enabled kann die Eingabe wie gewohnt erfolgen.

Der Reveal button ist Teil der Tab-Reihenfolge und wird mit der Eingabetaste ( Enter ) oder der Leerzeichentaste ( Space ) umgeschaltet. Wandert der Fokus vom Eingabefeld auf den Reveal button, gilt das Feld weiterhin als fokussiert und ein aufgedeckter Wert bleibt sichtbar. Ist der Reveal button ausgeblendet, wird er aus der Tab-Reihenfolge genommen und für assistive Technologien ausgeblendet.

Der Clear button ist nicht mit der Tastatur fokussierbar. Die Löschaktion erfolgt bei fokussiertem Feld über die Escapetaste ( Esc ).

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit dem Eingabefeld, die Kennzeichnung von Pflichtfeldern über das native required am Eingabefeld, die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby sowie den Zustand des Reveal button über aria\-pressed . Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

• Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
• Der Platzhalter ist kein Ersatz für das Label und wird nicht zuverlässig vorgelesen. Formathinweise gehören in das Label oder in den Helper text.
• Der Accessible Name des Reveal button lautet in der Vorgabe "Show password". Deutschsprachige Anwendungen setzen ihn über die Eigenschaft i18n des Feldes, Schlüssel reveal ; in Flow über PasswordFieldI18n . Die Sammelübersetzung aus @mate/i18n umfasst das Password Field nicht.
• Ein Feld, das dauerhaft nur der Anzeige dient, wird auf Read Only gesetzt: Es bleibt fokussierbar, für Screenreader sichtbar und sein Wert kopierbar. Ein Feld, das im Laufe des Prozesses wieder bearbeitbar werden kann, wird auf Disabled gesetzt: Es ist nicht fokussierbar und für Screenreader unsichtbar und eignet sich deshalb nicht zur Anzeige von Informationen. Siehe States .
• Fehlermeldung: Die Verknüpfung mit dem Eingabefeld stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Das Passwort muss mindestens 8 Zeichen enthalten" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
• Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .
• Prefix- und Suffix-Elemente werden von Screenreadern in der Regel nicht zuverlässig vorgelesen. Informationen, die über Prefix oder Suffix kommuniziert werden, müssen auch im Label, im Helper text oder über ARIA-Attribute verfügbar sein.