Zum Hauptinhalt springen
FigmaOpenCode

Input Month

Synonyme: Monatsfeld, Monats-Eingabefeld, Monatseingabe
Ähnliche Komponenten: Input E-Mail, Input Password, Input Text

Kurzbeschreibung​

Input Month unterstützt Nutzende bei der Eingabe eines Monats.

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

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="month">Month</label>
<input class="kern-form-input__input" id="month" name="month" type="month">
</div>

Readonly Month​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="month3">Month</label>
<input class="kern-form-input__input" id="month3" name="month3" type="month" readonly>
</div>

Disabled Month​

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="month4">Month</label>
<input class="kern-form-input__input" id="month4" name="month4" type="month" disabled>
</div>

Hint Error Month​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="month6">Month</label>
<div class="kern-form-input__hint" id="month-hint2">Hint Month</div>
<input class="kern-form-input__input kern-form-input__input--error" id="month6" name="month6" type="month" aria-describedby="month-hint2 date-error">
<p class="kern-error" id="month-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Der Monat darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

Für Input Month gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z.B. Zustände (states) oder Dos and Don’ts.

Input Month ermöglicht die Eingabe eines Monats und eines Jahres. Es bietet spezielle Funktionen und Eigenschaften, die die Auswahl und Verarbeitung von Monatsinformationen erleichtern. Das Feld enthält eine Kalenderansicht, die es Nutzenden erlaubt, einen Monat aus einer Dropdown- oder Kalenderübersicht auszuwählen. Dies reduziert die Wahrscheinlichkeit von Eingabefehlern und verbessert die Benutzerfreundlichkeit. Die Monatseingabe von Input Month nutzt die native Browser-Lösung, um Barrierefreiheit sicherzustellen.

Input Month akzeptiert die Eingabe im Format MM.JJJJ. Dieses Format stellt sicher, dass die Daten konsistent und standardisiert sind, was die Verarbeitung und Speicherung vereinfacht. Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Input Month wird in Formularen zur Eingabe eines Monats genutzt.

Beispiele:

  • Angabe des Ablaufdatums eines Ausweises

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