Zum Hauptinhalt springen
Version: 2.4.0
FigmaOpenCode

Input Date

Synonyme: Date, Datum-Eingabefeld
Ähnliche Komponenten: Input Text, Input Password, Input E-Mail

Kurzbeschreibung​

Input Date unterstützt Nutzende bei der Eingabe eines Datums.

Beispiele​

Default​

Code anzeigen
<fieldset class="kern-fieldset" aria-describedby="hint-text">
<legend class="kern-label">
  Wann wurde der Ausweis ausgestellt?
</legend>
<div class="kern-hint" id="hint-text">Beispielsweise: 17 3 2015</div>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-input">
    <label class="kern-label" for="tag">Tag</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="tag" name="tag" type="text" inputmode="numeric">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="monat">Monat</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="monat" name="monat" type="text" inputmode="numeric">
  </div>
    <div class="kern-form-input">
    <label class="kern-label" for="jahr">Jahr</label>
    <input class="kern-form-input__input kern-form-input__input--width-4" id="jahr" name="jahr" type="text" inputmode="numeric">
  </div>
<div>
</fieldset>

Readonly​

Code anzeigen
<fieldset class="kern-fieldset" aria-describedby="hint-text4">
<legend class="kern-label">
  Wann wurde der Ausweis ausgestellt?
</legend>
<div class="kern-hint" id="hint-text4">Beispielsweise: 17 3 2015</div>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-input">
    <label class="kern-label" for="tag3">Tag</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="tag3" name="tag3" type="text" inputmode="numeric" value="17" readonly>
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="monat3">Monat</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="monat3" name="monat3" type="text" inputmode="numeric" value="3" readonly>
  </div>
    <div class="kern-form-input">
    <label class="kern-label" for="jahr3">Jahr</label>
    <input class="kern-form-input__input kern-form-input__input--width-4" id="jahr3" name="jahr3" type="text" inputmode="numeric" value="2019" readonly>
  </div>
<div>
</fieldset>

Disabled​

Achtung

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

Code anzeigen
<fieldset class="kern-fieldset" aria-describedby="hint-text5">
<legend class="kern-label">
  Wann wurde der Ausweis ausgestellt?
</legend>
<div class="kern-hint" id="hint-text5">Beispielsweise: 17 3 2015</div>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-input">
    <label class="kern-label" for="tag4">Tag</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="tag4" name="tag4" type="text" inputmode="numeric" value="7" disabled>
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="monat4">Monat</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="monat4" name="monat4" type="text" inputmode="numeric" value="3" disabled>
  </div>
    <div class="kern-form-input">
    <label class="kern-label" for="jahr4">Jahr</label>
    <input class="kern-form-input__input kern-form-input__input--width-4" id="jahr4" name="jahr4" type="text" inputmode="numeric" value="2019" disabled>
  </div>
<div>
</fieldset>

Optional​

Code anzeigen
<fieldset class="kern-fieldset" aria-describedby="hint-text">
<legend class="kern-label">
  Wann wurde der Ausweis ausgestellt?
  <span class="kern-label__optional">- Optional</span>
</legend>
<div class="kern-hint" id="hint-text">Beispielsweise: 17 3 2015</div>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-input">
    <label class="kern-label" for="tag">Tag</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="tag" name="tag" type="text" inputmode="numeric">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="monat">Monat</label>
    <input class="kern-form-input__input kern-form-input__input--width-2" id="monat" name="monat" type="text" inputmode="numeric">
  </div>
    <div class="kern-form-input">
    <label class="kern-label" for="jahr">Jahr</label>
    <input class="kern-form-input__input kern-form-input__input--width-4" id="jahr" name="jahr" type="text" inputmode="numeric">
  </div>
<div>
</fieldset>

Hinweistext und Fehlermeldung​

Code anzeigen
<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text6">
<legend class="kern-label">
  Wann wurde der Ausweis ausgestellt?
</legend>
<div class="kern-hint" id="hint-text6">Beispielsweise: 17 3 2015</div>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-input">
    <label class="kern-label" for="tag5">Tag</label>
    <input class="kern-form-input__input kern-form-input__input--width-2 kern-form-input__input--error" id="tag5" name="tag5" type="text" inputmode="numeric" value="1" aria-describedby="kern-error">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="monat5">Monat</label>
    <input class="kern-form-input__input kern-form-input__input--width-2 kern-form-input__input--error" id="monat5" name="monat5" type="text" inputmode="numeric" value="5" aria-describedby="kern-error">
  </div>
    <div class="kern-form-input">
    <label class="kern-label" for="jahr5">Jahr</label>
    <input class="kern-form-input__input kern-form-input__input--width-4 kern-form-input__input--error" id="jahr5" name="jahr5" type="text" inputmode="numeric" value="2027" aria-describedby="kern-error">
  </div>
</div>
  <p class="kern-error" id="kern-error" role="alert">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-body">Das Ausstellungsdatum deines Ausweises muss in der Vergangenheit liegen.</span>
</p>
</fieldset>

Beschreibung​

Hinweis

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

Input Date besteht aus drei getrennten Eingabefeldern für Tag, Monat und Jahr. Diese strukturierte Eingabe hilft Nutzenden, das Datum präzise und in der erwarteten Reihenfolge einzugeben.
Die Felder werden in einem <fieldset> gruppiert und mit einer <legend> versehen, die sie beschreibt, z. B. „Geburtsdatum“. Direkt darunter unterstützt ein Hinweistext die Eingabe, indem er das gewünschte Format erläutert: „Beispielsweise: 14 4 2014“. So wird die Orientierung erleichtert und Eingabefehlern vorgebeugt.
Die drei Felder sind klar voneinander getrennt, aber optisch und semantisch als zusammengehörig erkennbar. Das ermöglicht sowohl visuell als auch mit Assistenztechnologien eine barrierearme und nachvollziehbare Eingabe.
Hinsichtlich ihrer Größe sollten die Felder nicht angepasst werden, um das Layout zu stabilisieren und die visuelle Einheitlichkeit zu fördern. Input Date kann alle unter Input beschriebenen Zustände annehmen.

Verwendungsregeln​

Input Date wird in Formularen zur Eingabe eines Datums genutzt. Wie Nutzende ein Datum eingeben oder auswählen sollen, hängt stark von der Art des Datums ab, das abgefragt wird. Mögliche Datumsarten umfassen:

  • Unveränderliche Daten wie Geburts- oder Heiratsdatum
  • Dokumentbezogene Daten wie das Ablaufdatum eines Reisepasses oder einer Kreditkarte
  • individuelle Daten Die Gestaltung der Eingabe muss sich an den jeweiligen Kontext anpassen, um die Verständlichkeit, Benutzerfreundlichkeit und Barrierefreiheit sicherzustellen.

Dokumentbezogene Daten
Wenn das Datum exakt einem offiziellen Dokument (z. B. Reisepass, Kreditkarte) entnommen werden soll, müssen die Eingabefelder das entsprechende Format widerspiegeln. So wird sichergestellt, dass Nutzende die Information korrekt übertragen können.

Schreibweise von Datumsbeispielen
Beispiele sollten so gewählt sein, dass Nutzende die Eingabereihenfolge intuitiv erfassen können. Verwende z. B. „14 4 2014“ statt „03 05 2014“, um Missverständnisse bei Tag und Monat zu vermeiden. Führende Nullen sollten nicht erforderlich sein.

Dos und Don’ts​

  • Siehe allgemeine Dos und Don'ts für Input
  • Hinsichtlich ihrer Größe sollten die Felder nicht angepasst werden, um das Layout zu stabilisieren und die visuelle Einheitlichkeit zu fördern.

Barrierefreiheit​

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.3.5

Date-Input hat ein passendes autocomplete-Attribut

Implementierungsabhängig

WCAG 3.3.1

Eingabefehler werden klar identifiziert

Implementierungsabhängig

WCAG 3.3.2

Datumsfeld hat eine eindeutige Beschriftung

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Date-Input ist programmatisch mit Label verknüpft

Bestanden

WCAG 1.3.1

Fehlermeldung ist programmatisch mit Eingabefeld verknüpft

Bestanden

WCAG 1.4.1

Feldstatus wird nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Text im Datumsfeld erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Datumsfeld hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab

Bestanden

WCAG 2.1.1

Datumsfeld ist vollständig per Tastatur bedienbar

Bestanden

WCAG 2.4.3

Die Navigationsreihenfolge ist logisch und intuitiv

Bestanden

WCAG 2.4.13

Datumsfeld hat einen sichtbaren Fokuszustand

Bestanden

WCAG 4.1.3

Fehlermeldung wird als Status-Nachricht gekennzeichnet

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Ich bin die KERN KI und kann zu allen Inhalten auf dieser Website Auskunft geben.

-  
-  
-  
-  
-  
-  
-  
-  
-