Verwendung
Aufbau
Comboboxen dienen der Auswahl eines Wertes aus einer Wertemenge, wenn Nutzende sich in einem Dropdown zwischen mehreren Werten entscheiden sollen. Comboboxen gehen über ein einfaches Select hinaus, indem sie zusätzlich ein Freitextfeld enthalten, mit dem in der Liste der Optionen gesucht und gefiltert werden kann.
Im Gegensatz zu nativen <select>-Elementen kann die optional konfigurierbare Filterfunktion auch Zeichenfolgen aus der Wortmitte möglicher Ergebnisse als Treffer zurück liefern.
Comboboxen bedingen eine tolerantere Formular-Validierung, da hier ja prinzipienbedingt beliebige Eingaben möglich sind. Sollte dies technisch oder fachlich nicht möglich sein, dann muss die Liste der erlaubten Auswahlen in einem Select dargestellt werden.
Comboboxen können auch verwendet werden, um gefilterte Vorauswahlen anzubieten, wie zum Beispiel bei der eindeutigen gegenseitigen Zuordnung von Postleitzahlen zu Orten über zwei Felder hinweg. Die Applikationslogik ist hierbei abhängig von der konkreten Anwendung und wird nicht vom Design System festgelegt.
In Comboboxen kann eine Option vorausgewählt werden, wenn diese mit hoher Wahrscheinlichkeit von Nutzenden 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
Comboboxen sollen wie auch Select genutzt werden, wenn aus Platzgründen nicht alle zur Verfügung stehenden Optionen 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.
Grund: Oftmals überschreitet die benötigte Textmenge der Beschriftungen von Optionen den zur Verfügung stehenden Platz in der Auswahlliste. Insbesondere auf mobilen Endgeräten führt dies dazu, dass wichtige Informationen abgeschnitten werden. Bei längeren Texten sind also Radiobuttons und deren Labels die bessere Wahl. Bei einer geringen Anzahl Optionen mit kurzen wie langen Label-Texten wird ebenso die Verwendung von Radiobuttons empfohlen (z. B. Auswahl Herr / Frau).
Beschriftung
Comboboxen benötigen zwingend eine Beschriftung, in welcher der Zweck und ggf. auch das erwartete Format beschrieben wird. Idealerweise wird dies ü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
Comboboxen 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-Comboboxes sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.
Interaction Design
Der Combobox-Button erhält bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs. Mausklick, Eingabetaste Enter oder Leerschritt bzw. Tap öffnen die hinterlegte Vorschlagsliste.
Der Fokus bewegt sich per Tab-Taste bzw. Swipe auf Touch-UIs vom Combobox-Button zur Combobox-Liste. Die Listenelemente sind mittels Pfeiltasten erreichbar und erhalten einen deutlichen visuellen Fokus-Indikator. Bei geöffneter Combobox-Liste wird diese durch die Escape-Taste geschlossen, ohne dass ein Wert übernommen wird.
Die direkte Eingabe von Zeichen (in der Regel a–z, 1–0) verschiebt den Fokus auf das nächstliegende Element, das mit diesem Zeichen beginnt (oder optional dieses Zeichen an beliebiger Stelle enthält). Die schnelle Eingabe mehrerer Zeichen legt den Fokus auf das Element, das mit dieser Zeichenfolge beginnt oder diese enthält (abhängig von der jeweiligen fachlichen Anforderung).
Do’s and Dont’s
So:
- Kurz formulierte Optionen zur Auswahl
- Eindeutige Formulierungen, die nur eine Auswahl zulassen
- Dem Inhalt entsprechende Sortierung der Optionen
- Optional 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 initial mögliche 3 Optionen, hierfür müssen Radiobuttons oder Select verwendet werden
