Verwendung
Auswahl-Elemente vom Typ select dienen der Auswahl eines Wertes aus einer Wertemenge, wo die Nutzenden sich in einem Dropdown zwischen mehreren Werten entscheiden sollen. Ein Select muss mindestens drei Werte in Form von option-Elementen enthalten, aus diesen Werten kann nur eine ausgewählt werden. Bei weniger als 3 Werten (z. B. bei einem einfachen Ja / Nein) müssen Radiobuttons verwendet werden.
Select sollen wie auch Comboboxen genutzt werden, wenn aus Platzgründen nicht alle zur Verfügung stehenden Optionen in Form von Radiobuttons sichtbar untereinander angezeigt werden können. Das Design System gibt jedoch bewusst keine Untergrenze vor, ab dem einer Gruppe von Radiobuttons statt Select oder Combobox verwendet werden soll, da oftmals die benötigte Textmenge der Beschriftungen den zur Verfügung stehenden Platz in einem Dropdown überschreiten würde.
Bei einer geringen Anzahl Optionen mit kurzen wie langen Label-Texten wird die Verwendung von Radiobuttons empfohlen (z. B. Herr / Frau / Divers), bei einer längeren Liste von Optionen mit kurzen Labeltexten (z. B. einer Länderauswahl) werden Select oder Combobox als geeigneteres UI-Element empfohlen.
<option>-Elemente innerhalb eines <select> können, sofern dies sinnvoll erscheint, per <optgroup> gruppiert und die Gruppen beschriftet werden.
In Select-Elementen kann eine Option vorausgewählt werden, wenn diese mit hoher Wahrscheinlichkeit ausgewählt wird, wie zum Beispiel <option value="de" selected>Deutschland</option> in einer Länderauswahl. In diesem Fall ist es auch zulässig, die vorausgewählte Option an den Beginn der ansonsten grundsätzlich alphabetisch sortierten Liste der Optionen zu stellen.
Abgrenzung
Elemente vom Typ select sollen verwendet werden, wenn die Auswahl aus einer bereits bekannten, finiten und überschaubaren Datenmenge getroffen werden soll. Diese Datenmenge ist bereits als option-Elemente im Markup der Seite hinterlegt.
Sobald jedoch eine Kommunikation mit dem Server stattfinden muss, soll das Muster Combobox verwendet werden. Dies ist zum Beispiel bei einer Datenbank-Abfrage im Rahmen einer Suche oder Filterung von Datensätzen der Fall.
Beschriftung
Select benötigen zwingend eine Beschriftung, in welcher der Zweck und ggf. auch das erwartete Format beschrieben wird. Dies wird über ein implizit oder explizit verknüpftes <label> erreicht.
Wenn kein ausreichender Platz für ein sichtbares Label zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.
Tooltips
Select können ein zugeordnetes Tooltip erhalten, das entweder Bestandteil der Feldbeschriftung ist, oder programmatisch verknüpft nach dem Formularelement steht.
Inaktive Elemente
Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Daten oder Vorauswahlen.
Readonly-Select sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.
Do’s and Dont’s
So:
- Kurz formulierte Optionen zur Auswahl
- Eindeutige Formulierungen, die nur eine Auswahl zulassen
- Dem Inhalt entsprechende Sortierung der Optionen
- Logische Gruppen von Optionen mit Optgroup strukturieren
- Eine Vorbelegung, die der wahrscheinlichsten Auswahl entspricht ("selected"-Attribut)
So nicht:
- Fließtexte als Optionen
- Auswahl löst eine Aktion aus
- Sortierung entspricht nicht der natürlichen Suchreihenfolge
- Weniger als 3 Optionen, hierfür müssen Radiobuttons verwendet werden
- Formulare nicht absenden, wenn sich der Wert eines Select ändert
