Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input Select

Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox, Ausklappliste, Klappliste
Ähnliche Komponenten: Radio, Checkboxes

Kurzbeschreibung​

Ein Select bietet die Möglichkeit zur Auswahl einer Option aus einer ausklappbaren Liste von Optionen.

Beispiele​

Default​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-label" for="select">Titel</label>
  <div class="kern-form-input__select-wrapper">
    <select class="kern-form-input__select" name="select">
      <option>Bitte auswählen</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Dipl.-Ing.</option>
      <option>M.Sc.</option>
    </select>
  </div>
</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="select">Titel</label>
  <div class="kern-form-input__select-wrapper">
    <select class="kern-form-input__select" name="select" disabled>
      <option>Bitte auswählen</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Dipl.-Ing.</option>
      <option>M.Sc.</option>
    </select>
  </div>
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-label" for="select">Titel <span class="kern-label__optional">- Optional</span></label>
  <div class="kern-form-input__select-wrapper">
    <select class="kern-form-input__select" name="select">
      <option>Bitte auswählen</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Dipl.-Ing.</option>
      <option>M.Sc.</option>
    </select>
  </div>
</div>

Hinweistext und Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="select5">Titel</label>
<div class="kern-hint" id="select-hint5">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-form-input__select-wrapper">
  <select class="kern-form-input__select kern-form-input__select--error" name="select5" aria-describedby="select-hint5 kern-input-error">
    <option>Bitte auswählen</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Dipl.-Ing.</option>
      <option>M.Sc.</option>
  </select>
</div>
<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-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung​

Hinweis

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

Input Select erlaubt die Auswahl von genau einer Option aus einer Liste von vordefinierten Optionen. Die Anzahl und der Inhalt der Optionen können beliebig definiert werden. Zum Treffen einer Auswahl öffnen Nutzende die Auswahlliste, indem sie auf das Input Select klicken oder es mit der Tastatur fokussieren. Der aktuell gewählte Wert wird in der geöffneten Liste visuell hervorgehoben und im geschlossenen Zustand im Element angezeigt. Eine direkte Eingabe von Text ist im Input Select nicht möglich.
Das Label des Input Select sollte kurz, prägnant und eindeutig auf die erwartete Eingabe hinweisen. Dort kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zu Auswahlkriterien oder zur Bedeutung der Optionen geben und unterstützt so die Nutzerfreundlichkeit. Input Select unterstützt 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 Select angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input Select kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „readonly“.

Verwendungsregeln​

Verwende ein Select zur Auswahl von Optionen in Formularen, nicht jedoch als Zugang zu Aktionen oder als Navigationselement. Ein Input Select wird verwendet, wenn es zwischen 5 und 15 Optionen zur Auswahl gibt. Nutzende können nur eine Option aus der Liste auswählen, nicht mehrere. Die Benutzbarkeit eines Selects ist grundsätzlich schwierig, vor allem wenn es viele Optionen gibt. Versuche daher, auf Selects zu verzichten, indem du Informationen systematisch bei Nutzenden abfragst. Verwende dazu Input Radios oder Input Checkboxes (gov.uk, W3C). Nutze Input Select nur dann, wenn du wenig Platz hast oder Eingabefehler vermeiden möchtest.

Dos und Don’ts​

Halte die Beschriftung der Werte in der Auswahlliste möglichst kurz. Halte die Beschriftung der Werte in der Auswahlliste möglichst kurz.

Weitere Hinweise​

  • Verwende maximal 15 Werte in der Auswahlliste, da es sonst schwer für Nutzende ist, die richtige Option zu finden. Bevorzuge Radios, wenn möglich.
  • Wähle nur dann einen Wert vorab aus, wenn es sich um eine bereits aktive Einstellung handelt. Anderenfalls können Nutzende durch die Vorauswahl beeinflusst werden oder die Notwendigkeit einer Auswahl wird übersehen.

Barrierefreiheit​

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

  • Auswahllisten, die Optionsgruppen enthalten, sollten mit „optgroup“ ausgezeichnet werden oder mit der Rolle „group“ mit einer Verknüpfung der Gruppenüberschrift über „aria-labelledby“ umgesetzt werden.

Siehe auch: BFIT Handreichungen, MagentaA11y, w3.org - Grouping Controls und w3.org - combobox

Inhaltsverzeichnis