Select

Mit einem Select wählen Nutzer einen oder mehrere Werte aus einer vorgegebenen Liste. Die Optionen erscheinen in einer Listbox, die sich beim Klick auf das Feld öffnet.

Wann verwenden

• Nutzer wählen einen Wert (bei multiple: true mehrere) aus einer vorgegebenen Liste von bis zu ca. 15 Optionen.
• Die Optionen sind bekannt und selbsterklärend, sodass Nutzer sie nicht alle sehen müssen, um zu entscheiden, z. B. Anrede, Land oder Sprache.
• Der Platz ist begrenzt, oder das Formular ist dicht und soll kompakt bleiben.

Wann nicht verwenden

Situation	Stattdessen
Mehr als ca. 15 Optionen	Combobox, damit Nutzer durch Tippen filtern können
Nutzer müssen wenige Optionen auf einen Blick vergleichen	Radio Group
Eine einzelne Ja/Nein- bzw. An/Aus-Entscheidung	Checkbox oder Switch
Es gibt nur eine Option	Wert als Text oder in einem Feld mit readOnly zeigen
Nutzer dürfen beliebige Werte eingeben	Text Field

Anatomie

1. Label (Pflicht): beschreibt, was ausgewählt wird
2. Eingabebereich (Pflicht): zeigt den gewählten Wert oder einen Platzhalter
3. Pfeil-Icon (Pflicht): zeigt, ob die Listbox geöffnet oder geschlossen ist. Es ist kein eigener Button.
4. Listbox (bei expanded: true): enthält die Optionen als List Box Items
5. 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 Wert gewählt. CSS :placeholder-shown.	Placeholder
required	false	Pflichtfeld	Required

Zustände

Achse	Werte	Hinweise
interaction	none · hover · focusVisible · active
availability	enabled · disabled
validation	none · invalid	z. B. Pflichtfeld nicht ausgefüllt
expanded	false · true	Listbox geschlossen oder geöffnet. ARIA aria-expanded.

Kombinationen

Kombination	Gestaltet?	Hinweis
focusVisible + invalid	ja	Fokusring und Fehlerdarstellung gleichzeitig sichtbar
expanded + invalid	ja	Fehlermeldung bleibt sichtbar
disabled + hover / 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.
• Nach der Auswahl erscheint die gewählte Option als Wert im Feld.

Listbox

• Breite: immer so breit wie das Feld
• Höhe und Scrollen: zeigt bis zu 7 Optionen gleichzeitig. Bei mehr Optionen wird sie scrollbar. Ist im Viewport weniger Platz, wird sie niedriger und scrollt früher.
• 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 Option direkt darüber.
• 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, sobald eine Option gewählt ist, und der Fokus kehrt ins Feld zurück. Bei Mehrfachauswahl bleibt sie offen. In beiden Fällen schließt sie bei Klick außerhalb, 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.

Optionale Auswahl

Müssen Nutzer bewusst keine Auswahl treffen können, so wie sie ein Textfeld leer lassen können, enthält die Liste eine neutrale Option an erster Stelle (z. B. „Keine Anrede“). Damit lässt sich auch eine frühere Auswahl rückgängig machen.

Inhalt & Microcopy

• Label: benennt, was gewählt wird, z. B. „Anrede“, „Thema“
• Fehlermeldung: sagt, was zu tun ist, z. B. „Wählen Sie ein Thema aus“
• Mehrfachauswahl (multiple: true): steht im Label in Klammern, z. B. „Themen (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.
• Neutrale Option: z. B. „Keine Anrede“
• Hinweistexte in der Listbox: siehe List Box Item

Barrierefreiheit

• Semantik: ARIA-Rolle combobox ohne Texteingabe („select-only combobox“), mit aria-expanded und aria-controls auf eine listbox
• Ansage: Label, Wert und Zustand (geöffnet/geschlossen) werden vorgelesen.
• Icons: Das Pfeil-Icon wird nicht vorgelesen. Es ist dekorativ und für Screenreader ausgeblendet, weil der Zustand bereits über das Feld angesagt wird. Gleiches gilt für ein vorangestelltes Icon.
• 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. „Keine Anrede, 1 von 3“. Zeigt die Listbox einen Fehler- oder Leer-Hinweis, wird dieser beim Öffnen 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: öffnen, durch die Optionen navigieren, auswählen, schließen.

Taste	Aktion
Tab	Fokus auf das Feld bzw. zum nächsten Element
↓ / ↑	Listbox öffnen, Optionen hervorheben (highlighted)
Enter / Space	Listbox öffnen bzw. hervorgehobene Option auswählen
Esc	Listbox schließen, ohne den Wert zu ändern
Home / End	erste bzw. letzte Option hervorheben
Buchstaben	zur ersten Option mit diesem Anfangsbuchstaben springen

Die Tastenbelegung folgt dem WAI-ARIA-Pattern „Select-Only Combobox“ 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 anstelle der Optionen. Kein Fehler: keine Fehlerfarbe, kein Fehler-Icon.
Nur eine Option vorhanden	Select vermeiden. Lässt es sich nicht vermeiden, etwa weil die Optionen dynamisch geladen werden, wird die einzige Option automatisch ausgewählt.
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
Wenig Platz im Viewport	Listbox wird niedriger und scrollt früher
In Modals oder scrollbaren Containern	Listbox wird nie abgeschnitten oder verdeckt

Maximalausprägung

• Viele Optionen: Ab 8 Optionen wird die Listbox scrollbar. Ab ca. 15 Optionen stattdessen eine Combobox verwenden.
• Mehrfachauswahl mit vielen Werten: Passen die gewählten Werte nicht ins Feld, zeigt es den ersten Wert und die Anzahl der übrigen, z. B. „Accessibility + 2“.
• Lange Optionstexte: werden in der Listbox umbrochen, nie gekürzt (siehe List Box Item).

Minimalausprägung

• Eine Option: siehe Edge Cases, wird automatisch ausgewählt
• Wenige Optionen: Ein Select ist auch bei wenigen, allgemein bekannten Optionen sinnvoll, z. B. bei der Anrede.
• Kein Wert gewählt: Platzhalter wird angezeigt (placeholderShown: true)

Do / Don't

• ✅ Do: Ein Select für die Anrede verwenden, obwohl es nur wenige Optionen gibt. Sie sind allen bekannt und müssen nicht auf einen Blick sichtbar sein.
• ❌ Don't: Ein Select verwenden, wenn Nutzer wenige Optionen vergleichen müssen, z. B. bei der Versandart (Standard oder Express). Stattdessen: Radio Group.
• ❌ Don't: Ein Select für mehr als ca. 15 Optionen verwenden, z. B. für Länder. Stattdessen: Combobox.
• ❌ Don't: Ein Select für eine einzelne Ja/Nein-Entscheidung verwenden. Stattdessen: Checkbox oder Switch.
• ❌ Don't: Ein Select mit nur einer Option zeigen, denn es verlangt eine Entscheidung, die es nicht gibt. Stattdessen: Wert als Text oder als Feld mit readOnly.
• ❌ Don't: Dieselbe Option mehrfach anzeigen. Stattdessen: Daten vor der Anzeige bereinigen.

Verwandte Komponenten

• Combobox: wie Select, aber mit Filterfunktion für mehr als ca. 15 Optionen
• List Box Item: die einzelnen Optionen in der Listbox
• Radio Group: wenn Optionen auf einen Blick vergleichbar sein sollen
• Checkbox / Switch: für eine einzelne An/Aus-Entscheidung

Änderungsprotokoll

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