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

warningAchtung

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

infoHinweis

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

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.
Siehe auch: Hinweise zur Barrierefreiheit für Input.