Figma
OpenCodeInput Group
Synonyme: Input Group Input, Input field, Eingabefeld, Text field, Text input
Ähnliche Komponenten: Input Date, Input E-Mail, Input Password
Kurzbeschreibung
Input Groups ermöglichen es, Text-Inputs mit visuellen Präfixen und Suffixen zu versehen. Diese sind rein visueller Natur und müssen daher im Label des Inputs beschrieben werden, um für Screenreader verständlich zu sein.
Beispiele
Default
Code anzeigen
<div class="kern-input-group">
<span class="kern-input-group-text">Prefix</span>
<input class="kern-form-input__input" id="group-text" name="group-text" type="text" />
<span class="kern-input-group-text">Suffix</span>
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-readonly-text">Name</label>
<div class="kern-input-group">
<span class="kern-input-group-text kern-input-group-text--readonly">Prefix</span>
<input class="kern-form-input__input" id="group-readonly-text" name="group-readonly-text" type="text" readonly value="Text" />
<span class="kern-input-group-text kern-input-group-text--readonly">Suffix</span>
</div>
</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="group-disabled-text">Name</label>
<div class="kern-input-group">
<span class="kern-input-group-text kern-input-group-text--disabled">Prefix</span>
<input class="kern-form-input__input" id="group-disabled-text" name="group-disabled-text" type="text" disabled />
<span class="kern-input-group-text kern-input-group-text--disabled">Suffix</span>
</div>
</div>Hinweistext und Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="group-error-text">Wie hoch ist die Miete, in Euro pro Monat?</label>
<div class="kern-input-group">
<span class="kern-input-group-text">€</span>
<input class="kern-form-input__input kern-form-input__input--error" id="group-error-text" name="group-error-text" type="text" inputmode="numeric" aria-describedby="group-error-message" />
<span class="kern-input-group-text">pro Monat</span>
</div>
<p class="kern-error" id="group-error-message" role="alert">
<span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
<span class="kern-body">Die Miete muss größer als 0 sein</span>
</p>
</div>Mit Button
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-with-icon-text">Geben Sie ein Stichwort ein</label>
<div class="kern-input-group">
<input class="kern-form-input__input" id="group-with-icon-text" name="group-with-icon-text" type="text" />
<button class="kern-btn kern-btn--secondary">
<span class="kern-icon kern-icon--visibility-off" aria-hidden="true"></span>
<span class="kern-label kern-sr-only">Bearbeiten</span>
</button>
</div>
</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
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.3.5
Text-Input hat ein passendes autocomplete-Attribut
WCAG 3.3.1
Input-Fehler werden klar identifiziert
WCAG 3.3.2
Text-Input hat aussagekräftige Beschriftung und Anweisungen
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Text-Input ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit Eingabefeld verknüpft
WCAG 1.3.5
Input-Zweck ist programmatisch erkennbar
WCAG 1.4.1
Input-Zustände werden nicht nur durch Farbe vermittelt
WCAG 1.4.6
Input-Text erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Input-Rahmen hebt sich mit mindestens 3:1 Kontrast ab
WCAG 2.1.1
Text-Input ist vollständig per Tastatur bedienbar
WCAG 2.4.13
Text-Input hat sichtbare Fokuszustände
WCAG 3.3.5
Hinweistext ist verfügbar und zugänglich
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen