Zum Hauptinhalt springen

Input Number

Synonyme: Zahlenfeld, Zahlen-Eingabefeld, Nummernfeld, Nummern-Eingabefeld
Ähnliche Komponenten: Input E-Mail, Input Password, Input Text

Kurzbeschreibung​

Input unterstützt Nutzende bei der Eingabe einer Zahl.

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Beispiele​

Default Number​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="number">Number</label>
<input class="kern-form-input__input" id="number" name="number" type="text" inputmode="numeric">
</div>

Readonly Number​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="number3">Number</label>
<input class="kern-form-input__input" id="number3" name="number3" type="text" inputmode="numeric" value="1234" readonly>
</div>

Disabled Number​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="number4">Number</label>
<input class="kern-form-input__input" id="number4" name="number4" type="text" inputmode="numeric" value="6789" disabled>
</div>

Hint Error Number​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="number6">Number</label>
<div class="kern-form-input__hint" id="number-hint">Hint Number</div>
<input class="kern-form-input__input kern-form-input__input--error" id="number6" name="number6" type="text" inputmode="numeric" aria-describedby="number-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-text">Die Number darf nicht leer sein</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 Feld 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.

Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Input Number wird in Formularen zur Eingabe einer Zahl genutzt.

Beispiele:

  • Angabe der Quadrameteranzahl eines Grundstücks

Dos und Don’ts​

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.

Inhaltsverzeichnis