Zum Hauptinhalt springen

Input Week

Synonyme: Wochenfeld, Wochen-Eingabefeld, Wocheneingabe
Ähnliche Komponenten: Input E-Mail, Input Password, Input Text

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.

Kurzbeschreibung​

Input Week unterstützt Nutzende bei der Eingabe einer Woche.

Beispiele​

Default Week​

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

Readonly Week​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="week3">Week</label>
<input class="kern-form-input__input" id="week3" name="week3" type="week" readonly>
</div>

Disabled Week​

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="week4">Week</label>
<input class="kern-form-input__input" id="week4" name="week4" type="week" disabled>
</div>

Hint Error Week​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="week6">Week</label>
<div class="kern-form-input__hint" id="week-hint2">Hint Week</div>
<input class="kern-form-input__input kern-form-input__input--error" id="week6" name="week6" type="week" aria-describedby="week-hint2 date-error">
<p class="kern-error" id="week-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 Week gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z.B. Zustände (states) oder Dos and Don’ts.

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

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

Verwendungsregeln​

Input Week wird in Formularen zur Eingabe einer Woche genutzt.

Beispiele:

  • Woche für die Durchführung von Inspektionen

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