Zum Hauptinhalt springen
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 Select​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-form-input__label" for="select">Auswählen</label>
  <div class="kern-form-input__select-wrapper">
    <select class="kern-form-input__select" name="select">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Hint Error Select​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="select5">Auswählen</label>
<div class="kern-form-input__hint" id="select-hint5">Hint Select</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>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</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-text">Option darf nicht gewählt werden.</span>
</p>
</div>

Beschreibung​

Select erlaubt die Auswahl genau einer Option aus einer Liste von vordefinierten Optionen. Ein Select wird mit einem Label beschrieben und ein optionaler Hint kann noch mehr Information liefern. Ein Platzhaltertext fordert Nutzende auf, eine Auswahl zu treffen. Der ausgewählte Wert wird in der geöffneten Liste visuell hervorgehoben und im geschlossenen Zustand im Feld angezeigt. Im Select Feld kann nicht geschrieben werden.

Verwendungsregeln​

Verwende ein Select zur Auswahl in Formularen, nicht jedoch als Zugang zu Aktionen oder als Navigationselement. Ein 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 Radios und Checkboxen (gov.uk, W3C). Nutze ein 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 role „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