Figma
OpenCodeInput Text
Synonyme: Textfeld, Edit, Input, Input field, Eingabefeld, Text field, Text input
Ähnliche Komponenten: Input Date, Input E-Mail, Input Password
Kurzbeschreibung
Ein Input Text ermöglicht Nutzenden, Buchstaben, Zahlen und Sonderzeichen einzugeben.
Beispiele
Default
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="text">Familienname</label>
<input class="kern-form-input__input" id="text" name="text" type="text">
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="text3">Familienname</label>
<input class="kern-form-input__input" id="text3" name="text3" type="text" value="Kim Musterperson" readonly>
</div>Disabled
Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="text4">Familienname</label>
<input class="kern-form-input__input" id="text4" name="text4" type="text" value="Kim Musterperson" disabled>
</div>Optional
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="text">Familienname <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="text" name="text" type="text">
</div>Hinweistext und Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="text6">Familienname</label>
<div class="kern-hint" id="text-hint2">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="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-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>Beschreibung
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. Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb des Textfelds angezeigt.
Hinsichtlich der Breite kann Input Name einfügen angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input Name einfügen kann alle unter Input beschriebenen Zustände annehmen.
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
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
- 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. Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.