Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input Tel

Synonyme: Rufnummer-Eingabe, Telefonisches Kontaktfeld, Mobilnummer-Eingabe
Ähnliche Komponenten: Input Number, Input Text, Input Date

Kurzbeschreibung​

Ein Input Tel unterstützt Nutzende bei der Eingabe einer Telefonnummer.

Beispiele​

Default​

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

Readonly​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="tel3">Telefonnummer</label>
<input class="kern-form-input__input" id="tel3" name="tel3" type="tel" value="+49 0132 1234567" readonly>
</div>

Disabled​

Achtung

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

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="tel4">Telefonnummer</label>
<input class="kern-form-input__input" id="tel4" name="tel4" type="tel" value="+49 0132 1234567" disabled>
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="tel">Telefonnummer <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="tel" name="tel" type="tel" autocomplete="tel">
</div>

Hinweistext und Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="tel6">Telefonnummer</label>
<div class="kern-hint" id="tel-hint2">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<input class="kern-form-input__input kern-form-input__input--error" id="tel6" name="tel6" type="tel" autocomplete="tel" aria-describedby="tel-hint2 date-error">
<p class="kern-error" id="tel-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung​

Hinweis

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

Input Tel ermöglicht die Eingabe einer Telefonnummer im numerischen Format bzw. Sonderzeichen wie das „+“ bei der Ländervorwahl. Das Feld nutzt type="tel", wodurch Nutzende eine Zifferntastatur für die Eingabe erhalten. Dies verbessert die Benutzerfreundlichkeit, insbesondere auf mobilen Geräten, und reduziert die Wahrscheinlichkeit von Eingabefehlern.
Das Label des Eingabefeldes sollte kurz, prägnant und eindeutig darauf hinweisen, dass eine Telefonnummer erwartet wird. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zum Format, zur Bedeutung oder zum Hintergrund der Eingabe geben und unterstützt so die Nutzerfreundlichkeit. Input Tel unterstützen die Eingabevalidierung, um sicherzustellen, dass die eingegebenen Daten korrekt sind. Fehlermeldungen und visuelle Hinweise informieren die Nutzenden über notwendige Korrekturen. Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb des Feldes angezeigt. Hinsichtlich der Breite kann Input Tel angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input Tel kann alle unter Input beschriebenen Zustände annehmen.

Verwendungsregeln​

Input Tel wird in Formularen zur Eingabe einer Telefonnummer genutzt. Zur Eingabe von allgemeinen Nummern ist Input Number besser geeignet. Aus der Beschriftung des Feldes sollte klar ersichtlich sein, dass hier nur Telefonnummern eingegeben werden dürfen (z. B. mobile Rufnummer, Telefonnummer). Ist dies nicht der Fall oder wird ein bestimmtes Format erwartet (z. B. mit Ländervorwahl), so muss ein Eingabehinweis im Hinweistext die zulässigen Zeichen und das Format erläutern.

Beispiele:

  • Angabe einer Festnetznummer
  • Angabe einer mobilen Rufnummer

Dos und Don’ts​

  • Nutze Input Tel nur zur Abfrage von Telefonnummern, für Zahlen allgemein ist das Input Number besser geeignet.
  • Gib Nutzenden einen Hinweis auf das erwartete Format.
  • Siehe allgemeine Dos und Don'ts für Input

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.

  • Die Eingabefelder für Telefonnummern sind weder visuell noch mit Assistenztechnologie als solche zu erkennen – sie werden als normale Eingabefelder angezeigt bzw. vom Screenreader ausgegeben. Deshalb müssen sie aussagekräftig beschriftet werden und sollten zusätzlich Bedienhinweise zum erforderlichen Eingabeformat erhalten.

Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis