Combobox

Auswahl aus mehr als ca. 15 Optionen, mit Filter durch Tippen

Mit einer Combobox wählen Nutzer einen oder mehrere Werte aus einer vorgegebenen Liste. Dabei filtern sie die Optionen durch Tippen. Anders als ein Text Field akzeptiert sie nur Werte aus der Liste.

Wann verwenden

Nutzer wählen einen oder mehrere Werte aus einer vorgegebenen Liste von mehr als ca. 15 Optionen.
Nutzer wissen, wonach sie suchen, und können es benennen, z. B. ein Land, eine Stadt oder einen Kunden.
Ein paar Buchstaben zu tippen ist schneller, als durch die Liste zu scrollen.

Wann nicht verwenden

Situation	Stattdessen
Bis ca. 15 Optionen	Select
Nutzer dürfen beliebige Werte eingeben	Text Field, denn eine Combobox akzeptiert nur Werte aus der Liste

Anatomie

Label (Pflicht): beschreibt, was ausgewählt wird
Eingabebereich (Pflicht): nimmt den Suchtext auf und zeigt den gewählten Wert oder einen Platzhalter
Such-Icon (Pflicht): kennzeichnet das Feld als durchsuchbar
Pfeil-Icon (Pflicht): zeigt, ob die Listbox geöffnet oder geschlossen ist
Clear-Button (sobald Text oder ein Wert im Feld steht): entfernt den Inhalt
Listbox (bei expanded: true): enthält die Optionen als List Box Items
Fehlermeldung (bei validation: invalid): steht unter dem Feld

Varianten

Eigenschaft	Werte	Standard	Wofür
`multiple`	`false` · `true`	`false`	`true` erlaubt Mehrfachauswahl. Begriff nach HTML `multiple`.

Optionen

Option	Standard	Wirkung	Figma-Name
`placeholderShown`	`true`	`true`: Platzhalter sichtbar, noch kein Text und kein Wert. CSS `:placeholder-shown`.	Placeholder
`required`	`false`	Pflichtfeld	Required

Zustände

Achse	Werte	Hinweise
`interaction`	`none` · `hover` · `focus` · `focusVisible` · `active`	siehe Unterschied `focus` / `focusVisible` unten
`availability`	`enabled` · `disabled`
`validation`	`none` · `invalid`
`expanded`	`false` · `true`	Listbox geschlossen oder geöffnet. ARIA `aria-expanded`.

focus vs. focusVisible:

focus: Das Feld erhält den Fokus per Maus oder Touch. Es wird nur der Rahmen hervorgehoben, ohne äußeren Ring. Manche Browser zeigen den Ring trotzdem, deshalb ist das kein striktes Abnahmekriterium.
focusVisible: Das Feld erhält den Fokus per Tastatur. Der äußere Fokusring ist sichtbar.

Kombinationen

Kombination	Gestaltet?	Hinweis
`focus` / `focusVisible` + `invalid`	ja	Fokusdarstellung und Fehlerdarstellung gleichzeitig sichtbar
`focus` + `expanded`	ja	Normalfall beim Tippen
`disabled` + `hover` / `focus` / `active` / `expanded`	nein	`disabled` ersetzt alle Interaktionszustände

Verhalten

Feld

Das ganze Feld ist interaktiv, nicht nur der Pfeil. Ein Klick oder Tipp irgendwo auf das Feld öffnet die Listbox. Ein weiterer Klick schließt sie, ohne den Wert zu ändern.
Breite: wie Form Field: füllt den Container, mindestens size.field.min (200 px), höchstens size.field.max (768 px).
Der Pfeil zeigt nur den Zustand an. Er ist kein eigener Button und kann nicht einzeln fokussiert werden.

Element	Verhalten
Eingabebereich	öffnet die Listbox und filtert beim Tippen
Clear-Button	löscht die Eingabe
Pfeil-Icon	öffnet die Listbox
List Box Item	wählt die Option aus

Nach der Auswahl erscheint die gewählte Option als Wert im Feld.

Clear-Button

Erscheint, sobald das Feld Text oder einen gewählten Wert enthält.
Ein Klick entfernt den Inhalt, zeigt wieder die vollständige Liste, und der Fokus bleibt im Feld.
Ist ausgeblendet, wenn das Feld leer oder disabled ist.
Ist per Tastatur erreichbar und bedienbar und hat einen zugänglichen Namen.

Suche

Filtern: Die Liste wird mit jedem Tastenanschlag gefiltert und zeigt nur passende Optionen. Löschen von Zeichen erweitert die Liste wieder.
Erster Treffer: Die erste Option der gefilterten Liste ist automatisch hervorgehoben (highlighted), sodass Nutzer sie mit Enter bestätigen können.
Treffer markieren: Der passende Teil jeder Option wird fett dargestellt, damit Nutzer sehen, warum die Option erscheint.
Reihenfolge der Treffer: Optionen, die mit dem Suchtext beginnen, stehen zuerst. Danach folgen Optionen, die ihn an anderer Stelle enthalten.
Groß-/Kleinschreibung und Sonderzeichen: werden ignoriert, ebenso Akzente und Umlaute. „osterreich“ findet „Österreich“.
Tippfehler: Kleine Tippfehler werden erkannt. „Autsria“ findet „Austria“.
Synonyme und alternative Schreibweisen: Die Komponente kann sie berücksichtigen, legt sie aber nicht selbst fest. Welche Begriffe zusammengehören, wird pro Projekt in den Daten definiert, z. B. dass „Holland“ auch „Niederlande“ findet.
Erneutes Öffnen: Ist bereits ein Wert gewählt, zeigt das Öffnen alle Optionen, nicht nur die zum aktuellen Wert passenden. Der Text im Feld ist markiert, sodass Tippen ihn ersetzt.

Listbox

Breite: immer so breit wie das Feld
Höhe und Scrollen: maximal 300 px hoch, danach scrollbar. Ist weniger Platz vorhanden, etwa am Bildschirmrand oder über der Bildschirmtastatur, wird sie niedriger.
Höhe beim Filtern: Die Listbox schrumpft mit der Liste. Öffnet sie sich oberhalb des Felds, bleibt sie am Feld angedockt.
Position: öffnet sich standardmäßig unter dem Feld. Reicht der Platz darunter nicht für die volle Höhe, öffnet sie sich darüber.
Scrollposition: Wenn möglich, steht die gewählte Option an zweiter sichtbarer Stelle, die vorherige direkt darüber. Am Anfang oder Ende der Liste ist das nicht immer möglich.
Ebene: liegt über allen anderen Elementen und wird nie verdeckt oder abgeschnitten, auch nicht in Modals oder scrollbaren Containern.
Schließen: Bei Einfachauswahl schließt sie nach der Auswahl, und der Fokus kehrt ins Feld zurück. Bei Klick außerhalb oder erneutem Klick auf das Feld schließt sie, ohne den Wert zu ändern. Bei Mehrfachauswahl bleiben alle bisher gewählten Optionen erhalten.

Sortierung

Standard: alphanumerisch. Sonderzeichen zuerst, dann Zahlen, dann Buchstaben. Zahlen werden nach ihrem Wert sortiert („Eintrag 2“ vor „Eintrag 10“). Buchstaben mit Akzent oder Umlaut werden wie ihr Grundbuchstabe einsortiert.
Ausnahme: logische Reihenfolge. Werden einige Optionen deutlich häufiger genutzt, wird nach Relevanz sortiert, etwa nach Nutzungshäufigkeit.
Beim Filtern gilt die Reihenfolge der Treffer (siehe Suche).

Mobil

Erhält das Feld den Fokus, scrollt die Seite das Feld so weit wie möglich nach oben. Die Listbox öffnet sich darunter und füllt den Platz bis zur Bildschirmtastatur.
Lässt sich die Seite nicht weit genug scrollen, etwa weil das Feld am Seitenende steht, öffnet sich die Listbox oberhalb und füllt den Platz bis zum oberen Rand des sichtbaren Bereichs.

Inhalt & Microcopy

Label: benennt, was gewählt wird, z. B. „Land“, „Projekt“
Fehlermeldung: sagt, was zu tun ist
Mehrfachauswahl (multiple: true): steht im Label in Klammern, z. B. „Länder (Mehrfachauswahl möglich)“. Kein eigener Hilfetext dafür.
Hilfetext: wird bei invalid nicht angezeigt, die Fehlermeldung ersetzt ihn. aria-describedby zeigt dann nur auf die Fehlermeldung.
Hinweistexte in der Listbox: siehe List Box Item

Barrierefreiheit

Semantik: Eingabefeld mit ARIA-Rolle combobox, aria-autocomplete="list", aria-expanded und aria-controls auf eine listbox. Die hervorgehobene Option wird über aria-activedescendant angegeben.
Ansage: Label, Wert und Zustand (geöffnet/geschlossen) werden vorgelesen.
Icons: Pfeil-Icon und Such-Icon werden nicht vorgelesen. Sie sind dekorativ und für Screenreader ausgeblendet. Der Clear-Button dagegen hat einen zugänglichen Namen.
Geöffnete Listbox: Die Optionen werden von oben nach unten vorgelesen, beginnend bei der gewählten Option, sonst bei der ersten. Jede Option wird mit ihrer Position angesagt, z. B. „China, 1 von 16“. Zeigt die Listbox einen Fehler- oder Leer-Hinweis, wird dieser beim Öffnen angesagt.
Keine Treffer: Der Hinweis wird beim Erscheinen angesagt.
Lesereihenfolge: 1. Label, 2. aktueller Wert oder Platzhalter, 3. Fehlermeldung (falls vorhanden), 4. Optionen von oben nach unten
Tastatur: Die Komponente ist vollständig per Tastatur bedienbar: tippen, öffnen, navigieren, auswählen, Eingabe löschen, schließen.

Taste	Aktion
`Tab`	Fokus auf das Feld bzw. zum nächsten Element (Clear-Button eingeschlossen)
Zeichen	Text eingeben, Listbox öffnet sich und filtert
`↓` / `↑`	Listbox öffnen, Optionen hervorheben (`highlighted`)
`Enter`	hervorgehobene Option auswählen
`Esc`	Listbox schließen, ohne den Wert zu ändern

Space gibt in der Combobox ein Leerzeichen ein und wählt keine Option aus. Die Tastenbelegung folgt dem WAI-ARIA-Pattern „Editable Combobox with List Autocomplete“ und ist noch nicht bestätigt.

Grenzfälle

Edge Cases

Fall	Verhalten
Optionen laden länger	Listbox zeigt einen Ladeindikator anstelle der Optionen, bis sie verfügbar sind
Optionen konnten nicht geladen werden	Wird erst beim Öffnen sichtbar. Die Listbox zeigt eine kurze Fehlermeldung, z. B. „Optionen konnten nicht geladen werden“.
Liste ist leer	Neutraler Hinweis „Keine Inhalte vorhanden“ anstelle der Optionen. Kein Fehler: keine Fehlerfarbe, kein Fehler-Icon.
Keine Treffer für den Suchtext	Listbox bleibt offen und zeigt einen neutralen Hinweis. Kein Fehler. Der Hinweis ist keine Option: Er kann weder ausgewählt noch hervorgehoben werden und wird beim Erscheinen angesagt.
Tippfehler	werden von der Komponente erkannt (siehe Suche)
Synonyme, alternative Schreibweisen	werden nur gefunden, wenn sie im Projekt definiert sind (siehe Suche)
Doppelte Optionen	Jede Option erscheint nur einmal. Kommen Daten aus mehreren Quellen, werden Duplikate vor der Anzeige bereinigt.
Wenig Platz unter dem Feld	Listbox öffnet sich darüber
Bildschirmtastatur auf Touchscreens	siehe Verhalten → Mobil
In Modals oder scrollbaren Containern	Listbox wird nie abgeschnitten oder verdeckt

Maximalausprägung

Viele Optionen: Die Listbox ist maximal 300 px hoch und scrollt.
Mehrfachauswahl mit vielen Werten: Passen die gewählten Werte nicht ins Feld, zeigt es den ersten Wert und die Anzahl der übrigen, z. B. „Belgien + 2“.
Lange Optionstexte: werden in der Listbox umbrochen, nie gekürzt (siehe List Box Item).

Minimalausprägung

Wenige Optionen: Bei ca. 15 oder weniger Optionen stattdessen ein Select verwenden.
Ein Treffer: wird automatisch hervorgehoben und lässt sich mit Enter bestätigen.
Leeres Feld: Platzhalter sichtbar, Clear-Button ausgeblendet.

Do / Don't

✅ Do: Eine Combobox bei vielen Optionen verwenden, wenn Nutzer wissen, wonach sie suchen, und es benennen können, z. B. ein Land.
❌ Don't: Eine Combobox für Listen mit 15 oder weniger Optionen verwenden, z. B. für die Anrede. Stattdessen: Select.
❌ Don't: Eine Combobox verwenden, wenn Nutzer beliebige Werte eingeben dürfen, z. B. einen Namen. Stattdessen: Text Field.
✅ Do: Im Projekt Synonyme und alternative Schreibweisen für die Optionen definieren, sodass „Holland“ auch „Niederlande“ findet.
❌ Don't: Dieselbe Option mehrfach anzeigen. Stattdessen: Daten vor der Anzeige bereinigen.

Änderungsprotokoll

Version	Datum	Änderung	Autorin
–	2026-10-08	Spec erstellt	Lisa Vandenhoeck
0.1	2026-10-20	In MD-Struktur überführt, Namen an naming.md angepasst	Lisa Vandenhoeck

Doku draft · Version 0.1 · Stand 2026-10-20