Zum Hauptinhalt springen
FigmaOpenCode

Input E-Mail

Synonyme: E-Mail-Eingabefeld, E-mail input field, Email input field
Ähnliche Komponenten: Input Date, 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 E-Mail unterstützt Nutzende bei der Eingabe einer E-Mail-Adresse.

Beispiele​

Default E-Mail​

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

Readonly E-Mail​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="email3">Email</label>
<input class="kern-form-input__input" id="email3" name="email3" type="email" autocomplete="email" value="mail@mee.me" readonly>
</div>

Disabled E-Mail​

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="email4">Email</label>
<input class="kern-form-input__input" id="email4" name="email4" type="email" autocomplete="email" value="mail@mee.me" disabled>
</div>

Hint Error E-Mail​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="email6">Email</label>
<div class="kern-form-input__hint" id="email-hint">Hint Email</div>
<input class="kern-form-input__input kern-form-input__input--error" id="email6" name="email6" type="email" autocomplete="email" aria-describedby="email-hint kern-input-error">
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Die Email darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

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

Input E-Mail akzeptiert die Eingabe einer E-Mail-Adresse.
Das E-Mail-Feld validiert automatisch das Format der eingegebenen E-Mail-Adresse. Es überprüft, ob die Eingabe die grundlegende Struktur einer E-Mail-Adresse (z.B. Benutzername@domain.tld) erfüllt. Bei ungültigen Eingaben wird eine Fehlermeldung angezeigt.
Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Verwende ein Input E-Mail nur zur Eingabe von E-Mail-Adressen. Gebe Hilfestellung zum erwarteten Format.

Dos und Don’ts​

  • Erlaube die autocomplete-Funktion, so dass die E-Mail-Adresse vervollständigt wird, wenn Nutzende diese bereits einmal eingegeben hatten.

Weitere Hinweise​

Barrierefreiheit​

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

Inhaltsverzeichnis