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.

infoHinweis

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

warningAchtung

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

infoHinweis

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

• Siehe allgemeine Dos und Don'ts für Input

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.