Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input 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​

Achtung

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​

Hinweis

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​

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.

  • Input Number sollte mit einem klaren, sprechenden Label versehen sein, das den erwarteten Inhalt eindeutig beschreibt (z. B. „Anzahl“, „Menge“, „Alter“).
  • Verwende min, max und step, um den gültigen Wertebereich einzuschränken und Screenreadern sowie Tastaturnutzenden klare Orientierung zu bieten.
  • Nutze aria-describedby, um ergänzende Hinweise zum Eingabeformat, zu Einheiten (z. B. „in kg“) oder zu erwarteten Werten bereitzustellen.
  • Verzichte auf die Verwendung von type="number" für Inhalte wie Telefonnummern oder Postleitzahlen – diese sollten mit type="tel" oder type="text" und passenden Hilfstexten umgesetzt werden.

Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis