Zum Hauptinhalt springen
FigmaOpenCode

Input Text

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

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Ein Input Text ermöglicht Nutzenden, Buchstaben, Zahlen und Sonderzeichen einzugeben.

Beispiele​

Default Text​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="text">Name</label>
<input class="kern-form-input__input" id="text" name="text" type="text">
</div>

Readonly Text​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="text3">Name</label>
<input class="kern-form-input__input" id="text3" name="text3" type="text" value="Text" readonly>
</div>

Disabled Text​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="text4">Name</label>
<input class="kern-form-input__input" id="text4" name="text4" type="text" disabled>
</div>

Hint Error Text​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="text6">Name</label>
<div class="kern-form-input__hint" id="text-hint2">Hint Text</div>
<input class="kern-form-input__input kern-form-input__input--error" id="text6" name="text6" type="text" aria-describedby="text-hint2 text-error">
<p class="kern-error" id="text-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Der Name darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

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

Ein Textfeld (Input Text) ist eine grundlegende Komponente, die es Nutzenden ermöglicht, alphanumerische Daten (z.B. Buchstaben, Zahlen, Sonderzeichen) in ein Formular einzugeben. Diese vielseitig einsetzbare Komponente kann für verschiedene Eingabetypen angepasst werden. Textfelder unterstützen die Eingabevalidierung, um sicherzustellen, dass die eingegebenen Daten korrekt sind. Fehlermeldungen und visuelle Hinweise informieren die Nutzenden über notwendige Korrekturen. Sie können verschiedene Zustände annehmen, um den Nutzenden ihren aktuellen Status anzuzeigen. Diese sieben Zustände umfassen: default, hover, focus, readonly, disabled, error und error focus.
Hinsichtlich ihrer Größe können Textfelder angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Mehr Informationen zu Breite und Höhe der Eingabefelder.

Verwendungsregeln​

Um eine optimale Benutzererfahrung zu gewährleisten, sollten bei der Verwendung von Textfeldern bestimmte Regeln und Best Practices beachtet werden.
Verwende Input Text, wenn die zu erwartende Eingabe einzeilig und nicht vorhersehbar ist. Sind die Antwortoptionen bekannt und auswählbar, nutze besser Checkboxes oder Radios. Für längere, mehrzeilige Texteingaben nutze die Text Area.

Dos und Don’ts​

Das Negativ-Beispiel zeigt ein Input Text mit Freitexteingabe, im Positiv-Beispiel sind vordefinierte Antworten als Checkboxen zu sehen. Wenn Nutzende eine Option aus einer vordefinierten Liste wählen können, vermeide eine Freitexteingabe, da dies fehleranfälliger ist und das Vergleichen oder Zuordnen von Daten erschwert. Verwende stattdessen z.B. Checkboxen oder Radiobuttons.

Weitere Hinweise​

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste. Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis