Figma
OpenCodeInput 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
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
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.
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
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.3.5
Select hat ein passendes autocomplete-Attribut
WCAG 3.3.1
Select-Fehler werden klar identifiziert
WCAG 3.3.2
Select hat aussagekräftige Beschriftung und Anweisungen
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Select ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit Select verknüpft
WCAG 1.4.1
Select-Zustände werden nicht nur durch Farbe vermittelt
WCAG 1.4.6
Select-Text erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Select-Rahmen hebt sich mit mindestens 3:1 Kontrast ab
WCAG 2.1.1
Select ist vollständig per Tastatur bedienbar
WCAG 2.4.13
Select hat sichtbare Fokuszustände
WCAG 4.1.2
Select-Zustand ist programmatisch erkennbar
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen