Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input Password

Synonyme: Passwort-Eingabefeld, Passwortfeld, Password input field
Ähnliche Komponenten: Input Date, Input E-Mail, Input Text

Kurzbeschreibung​

Input Password ermöglicht die Eingabe oder Erstellung eines Passworts.

Beispiele​

Default​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="password">Passwort</label>
<input class="kern-form-input__input" id="password" name="password" type="password">
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="password">Passwort <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="password" name="password" type="password">
</div>

Hinweistext und Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="password6">Passwort</label>
<div class="kern-hint" id="password-hint">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<input class="kern-form-input__input kern-form-input__input--error" id="password6" name="password6" type="password" aria-describedby="password-hint kern-input-error">
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md"  aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung​

Hinweis

Für Input Password gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Input Password stellt die Zeichen bei der Eingabe durch den Nutzenden maskiert dar. Unterhalb des Feldes gibt es einen Link „Passwort vergessen“, der Nutzende zu einem Formular zur Beantragung eines neuen Passwortes führen soll. Im Gegensatz zu regulären Textfeldern werden die eingegebenen Zeichen in einem Passwortfeld durch Punkte ersetzt. Dies schützt die eingegebenen Daten vor neugierigen Blicken und erhöht die Sicherheit. Nutzende können die Sichtbarkeit der Zeichen ein- oder ausblenden, indem sie auf das Ansichtssymbol rechts im Eingabefeld klicken. Das Einblenden hilft Nutzenden, Tippfehler zu vermeiden. Die „autocomplete“-Funktion ist in Passwortfeldern deaktiviert, um den Datenschutz zu gewährleisten. Dies verhindert, dass Passwörter automatisch von Webbrowsern gespeichert und wiederverwendet werden. Input Password kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „disabled" und „readonly".

Verwendungsregeln​

Input Password wird im Anmelde- oder Registrierungsprozess eines Dienstes zur Eingabe des Passwortes genutzt. Verwende Input Password nicht für andere Texteingaben.

Dos und Don’ts​

  • Erläutere in der Hilfe die Regeln und Restriktionen zur Erstellung eines Passwortes im Falle der Registrierung.
  • Verwende die Autovervollständigung autocomplete="current-password" oder autocomplete="new-password".
  • Verzichte nicht ohne guten Grund auf die Autovervollständigung – sie verbessert die Nutzerfreundlichkeit und wird von modernen Browsern erwartet.
  • Gib bei fehlerhaften Logins nicht preis, ob Benutzername oder Passwort falsch war – verwende eine neutrale Fehlermeldung, um Sicherheitsrisiken zu vermeiden.
  • Siehe auch allgemeine Dos und Don'ts für Input

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.

  • Ergänze bei Bedarf zusätzliche Hinweise (z. B. Anforderungen an die Passwortstärke oder erlaubte Zeichen) über das aria-describedby-Attribut und verknüpfe sie korrekt mit dem Eingabefeld.
  • Stelle sicher, dass das Eingabefeld mit autocomplete="new-password" oder autocomplete="current-password" korrekt ausgezeichnet ist, um die Barrierefreiheit und Nutzbarkeit von Passwortmanagern zu verbessern.
  • Falls eine Funktion zum Sichtbarmachen des Passworts vorhanden ist (z. B. ein „Passwort anzeigen“-Button), achte darauf, dass diese Funktion für Tastatur und Screenreader zugänglich ist (z. B. über aria-pressed und einen beschreibenden Text).
  • Der „Passwort anzeigen“-Button sollte mit einem sprechenden Label versehen werden und darf nicht nur durch ein Icon dargestellt werden. Verwende Icons gegebenenfalls mit aria-hidden="true", damit sie nicht unnötig vorgelesen werden.
  • Eingabefehler (z. B. ein ein zu kurzes Passwort) müssen klar verständlich und direkt unterhalb des Passwortfeldes ausgegeben werden und sollten mit aria-describedby an das Feld gekoppelt sein.

Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis