Figma
OpenCodeInput Number
Synonyme: Zahlenfeld, Zahlen-Eingabefeld, Nummernfeld, Nummern-Eingabefeld
Ähnliche Komponenten: Input Date, Input Tel, Input Text
Kurzbeschreibung
Ein Input Number unterstützt Nutzende bei der Eingabe einer Zahl.
Beispiele
Default
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="plz">Postleitzahl</label>
<input class="kern-form-input__input" id="plz" name="plz" type="text" inputmode="numeric">
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="plz3">Postleitzahl</label>
<input class="kern-form-input__input" id="plz3" name="plz3" type="text" inputmode="numeric" value="20537" 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="plz4">Postleitzahl</label>
<input class="kern-form-input__input" id="plz4" name="plz4" type="text" inputmode="numeric" value="20537" disabled>
</div>Optional
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="plz">Postleitzahl <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="plz" name="plz" type="text" inputmode="numeric">
</div>Hinweistext und Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="plz6">Postleitzahl</label>
<div class="kern-hint" id="plz-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="plz6" name="plz6" type="text" inputmode="numeric" aria-describedby="plz-hint kern-input-error">
<p class="kern-error" id="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
Für Input Date gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.
Das Input Number ist auf den inputmode="numeric" eingestellt, wodurch Nutzende primär eine numerische Eingabemethode (z. B. eine Zifferntastatur auf Mobilgeräten) erhalten. Dies verbessert die Benutzerfreundlichkeit und reduziert die Wahrscheinlichkeit von Eingabefehlern bei der Eingabe von Zahlen.
Das Label des Eingabefeldes sollte kurz, prägnant und eindeutig auf die erwartete Eingabe hinweisen. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zum Format, zur Bedeutung oder zum Hintergrund der Eingabe geben und unterstützt so die Nutzerfreundlichkeit. Input Number unterstützt 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 Feldes angezeigt. Hinsichtlich der Breite kann Input Number angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input Number kann alle unter Input beschriebenen Zustände annehmen.
Verwendungsregeln
Input Number wird in Formularen zur Eingabe einer Zahl genutzt. Verwende Input Number, wenn die zu erwartende Eingabe nicht vorhersehbar ist. Sind die Antwortoptionen bekannt und auswählbar, nutze besser ein Input Select, Input Checkboxes oder Input Radios. Handelt es sich um ein Datum, nutze Input Date. Zur Eingabe einer Telefonnummer ist Input Tel besser geeignet, da hier auch andere Zeichen, wie das „+“ erlaubt sind. Aus der Beschriftung des Feldes sollte klar ersichtlich sein, dass hier nur Zahlen eingegeben werden dürfen (z. B. Hausnummer, Postleitzahl). Ist dies nicht der Fall, so muss ein Eingabehinweis im Hinweistext die zulässigen Zeichen erläutern.
Beispiele:
- Angabe der Quadrameteranzahl eines Grundstücks
- Eingabe einer Postleitzahl
- Eingabe einer Versicherungsnummer (sofern sie nur aus Zahlen besteht)
Dos und Don’ts
- Nutze bei anderen festen Zahlenformaten wie Telefonnummern oder Datum besser Input Tel und Input Date.
- Sind die Eingabeoptionen bekannt, nutze besser Input Select, Input Checkboxes oder Input Radios.
- Siehe 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
Zahlenfeld hat ein passendes autocomplete-Attribut
WCAG 3.3.1
Eingabefehler werden klar identifiziert
WCAG 3.3.2
Zahlenfeld hat eine eindeutige Beschriftung
WCAG 3.3.2
Wertebereich ist durch Attribute definiert
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Number-Input ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit Zahlenfeld verknüpft
WCAG 1.4.1
Feldstatus wird nicht nur durch Farbe vermittelt
WCAG 1.4.6
Text im Zahlenfeld erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Zahlenfeld hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab
WCAG 2.1.1
Zahlenfeld ist vollständig per Tastatur bedienbar
WCAG 2.4.3
Die Navigationsreihenfolge ist logisch und intuitiv
WCAG 2.4.13
Zahlenfeld hat einen sichtbaren Fokuszustand
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen