Figma
OpenCodeInput Group
Synonyme: Input mit Präfix / Suffix, Eingabefeld mit Zusatz, Input-Gruppe, Kombiniertes Eingabefeld
Ähnliche Komponenten: Input Text, Search, Input Password
Kurzbeschreibung
Input Groups erweitern ein Eingabefeld um ein Präfix, ein Suffix oder eine Aktion, um den erwarteten Eingabewert klarer zu machen oder direkt zu verarbeiten.
Beispiele
Text-Präfix
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-text">Telefonnummer</label>
<div class="kern-hint" id="group-text-hint">Geben Sie Ihre Telefonnummer ohne die führende 0 oder +49 ein.</div>
<div class="kern-input-group">
<span class="kern-input-group-text" aria-hidden="true">+49</span>
<input class="kern-form-input__input" id="group-text" name="group-text" type="tel" autocomplete="tel-national" aria-describedby="group-text-hint" />
</div>
</div>Text-Suffix
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-suffix-text">Wohnfläche in Quadratmetern</label>
<div class="kern-input-group">
<input class="kern-form-input__input" id="group-suffix-text" name="group-suffix-text" type="text" inputmode="numeric" />
<span class="kern-input-group-text" aria-hidden="true">m²</span>
</div>
</div>Text-Präfix und -Suffix
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-prefix-suffix-text">Internetadresse (URL)</label>
<div class="kern-hint" id="group-prefix-suffix-text-hint">Tragen Sie nur den Domainnamen ohne https:// und ohne Endung .de ein.</div>
<div class="kern-input-group">
<span class="kern-input-group-text" aria-hidden="true">https://</span>
<input class="kern-form-input__input" id="group-prefix-suffix-text" name="group-prefix-suffix-text" type="text" autocomplete="url" aria-describedby="group-prefix-suffix-text-hint" />
<span class="kern-input-group-text" aria-hidden="true">.de</span>
</div>
</div>Button-Suffix
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-with-icon-text">Passwort</label>
<div class="kern-input-group">
<input class="kern-form-input__input" id="group-with-icon-text" name="group-with-icon-text" type="password" autocomplete="current-password" />
<button class="kern-btn kern-btn--secondary" type="button" aria-pressed="false">
<span class="kern-icon kern-icon--visibility-off" aria-hidden="true"></span>
<span class="kern-label kern-sr-only">Passwort anzeigen</span>
</button>
</div>
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="group-readonly-text">Wie hoch ist die Miete, in Euro pro Monat?</label>
<div class="kern-input-group">
<span class="kern-input-group-text kern-input-group-text--readonly" aria-hidden="true">€</span>
<input class="kern-form-input__input" id="group-readonly-text" name="group-readonly-text" type="text" inputmode="numeric" readonly value="850" />
<span class="kern-input-group-text kern-input-group-text--readonly" aria-hidden="true">pro Monat</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">Wie hoch ist die Miete, in Euro pro Monat?</label>
<div class="kern-input-group">
<span class="kern-input-group-text kern-input-group-text--disabled" aria-hidden="true">€</span>
<input class="kern-form-input__input" id="group-disabled-text" name="group-disabled-text" type="text" inputmode="numeric" disabled value="850" />
<span class="kern-input-group-text kern-input-group-text--disabled" aria-hidden="true">pro Monat</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" aria-hidden="true">€</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" aria-hidden="true">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>Beschreibung
Für Input Group gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.
Eine Input Group ist eine Komponente, die ein Eingabefeld um zusätzliche Elemente vor (Präfix) oder nach (Suffix) dem Input erweitert. Diese Elemente können aus Text oder interaktiven Komponenten wie Buttons bestehen und dienen dazu, den Kontext der Eingabe zu verdeutlichen oder eine direkte Interaktion zu ermöglichen. Input Groups werden eingesetzt, um Eingaben verständlicher zu machen, beispielsweise durch die Darstellung von Einheiten, Währungen oder strukturellen Bestandteilen wie URL-Präfixen. Die zusätzlichen Elemente sind dabei nicht Teil des eigentlichen Eingabewerts, sondern dienen ausschließlich der visuellen und funktionalen Unterstützung.
Die Komponente verhält sich funktional wie ein einzelnes Eingabefeld. Interaktionen wie Fokus, Eingabe und Validierung beziehen sich ausschließlich auf das Input-Feld selbst. Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb der Input Group angezeigt. Input Groups unterstützen die Zustände Default, Focus, Error, Disabled und Read-only. Weitere Hinweise zu Verhalten und Zuständen findest du in der allgemeinen Input-Dokumentation „States“.
Da Präfixe und Suffixe nicht automatisch von assistiven Technologien erfasst werden, müssen deren Bedeutung und Kontext im Label oder in unterstützenden Texten beschrieben werden.
Verwendungsregeln
Um eine klare und verständliche Eingabe zu gewährleisten, sollten Input Groups gezielt und kontextabhängig eingesetzt werden.
Verwende Input Groups, wenn zusätzliche Informationen direkt am Eingabefeld dargestellt werden sollen, die den Kontext der Eingabe verdeutlichen. Dazu zählen beispielsweise Einheiten wie Euro, Prozent oder Kilogramm, strukturierende Bestandteile wie URL-Präfixe oder auch Aktionen, die in direktem Zusammenhang mit der Eingabe stehen, etwa das Ein- und Ausblenden eines Passworts.
Sie eignen sich besonders für standardisierte Eingaben, bei denen Teile des Werts bereits vorgegeben sind und daher nicht von den Nutzenden eingegeben werden müssen. Dadurch wird die Eingabe vereinfacht und Missverständnisse werden reduziert.
Input Groups können auch eingesetzt werden, um Aktionen im direkten Zusammenhang mit einer Eingabe anzubieten, beispielsweise das Auslösen einer Suche. In diesem Fall sollte die Aktion eng mit dem Eingabefeld verknüpft sein und dessen Nutzung sinnvoll ergänzen.
Dos und Don’ts
- Formuliere das Label so, dass der Kontext der Eingabe eindeutig ist, etwa „Kosten in Euro“ statt nur „Kosten“.
- Achte darauf, dass Eingaben auch dann korrekt verarbeitet werden, wenn Nutzende Präfixe oder Suffixe zusätzlich manuell in das Input-Feld einfügen.
- Wenn ein Feld selbsterklärend ist, verwende keine Input Group.
- Verwende universell verständliche Präfixe und Suffixe, z. B. „%“ statt „v. H.“ (von Hundert).
- Vermeide unklare oder mehrdeutige Abkürzungen sowie lange oder komplexe Inhalte in Präfixen und Suffixen.
- Nutze Präfixe und Suffixe sparsam. Sie sollen nicht von der eigentlichen Eingabe ablenken.
- Platziere das Label immer außerhalb der Input Group, damit die Bedeutung des Eingabefeldes eindeutig und barrierefrei vermittelt wird.
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
Input der Input Group hat ein passendes autocomplete-Attribut
WCAG 3.3.1
Fehler in der Input Group werden klar identifiziert
WCAG 3.3.2
Label oder Hinweistext beschreibt Präfix und Suffix der Input Group aussagekräftig
WCAG 4.1.2
Eingebettete Buttons in der Input Group haben einen aussagekräftigen Namen
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Input der Input Group ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit dem Eingabefeld der Input Group verknüpft
WCAG 1.4.1
Zustände der Input Group werden nicht nur durch Farbe vermittelt
WCAG 1.4.6
Text in Input, Präfix und Suffix erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Rahmen der Input Group hebt sich mit mindestens 3:1 Kontrast ab
WCAG 2.1.1
Input Group ist vollständig per Tastatur bedienbar
WCAG 2.4.13
Input Group hat sichtbare Fokuszustände
WCAG 4.1.2
Visuelle Präfix- und Suffix-Elemente sind für Screenreader korrekt ausgeblendet
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen