Select

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Synonyme: Dropdown, Dropdown-Liste, Auswahlliste, Auswahlfeld

Beschreibung: Die Select-Komponente ermöglicht die Auswahl einer oder mehrerer Optionen aus einer vordefinierten Liste.

Sie eignet sich für strukturierte Eingaben, bei denen ausschließlich bekannte Werte zulässig sind und keine freie Texteingabe erfolgen soll. Je nach Konfiguration unterstützt die Komponente sowohl die Einfachauswahl als auch die Mehrfachauswahl.

Die auswählbaren Optionen werden über die Property _options bereitgestellt und können optional mithilfe von Optionsgruppen (Optgroups) logisch strukturiert werden.

Beispiel

Standard-Auswahlliste mit Pflichtfeld-Markierung:

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Barrierefreiheit

• Die Select-Komponente basiert auf dem nativen HTML-Element <select>.
• Der Browser weist dem nativen <select> automatisch die korrekten ARIA-Rollen zu und übernimmt zugleich die Tastaturbedienung, das Fokus-Handling und das Ansageverhalten für Screenreader.
• Die KoliBri-Komponente ergänzt keine eigenen ARIA-Rollen. Zusätzliche ARIA-Rollen (z. B. role="combobox" oder role="listbox") sind nicht erforderlich und sollten nicht ergänzt werden.
• Die Komponente unterstützt die Beschriftung über die Property _label. Hinweise und Fehlermeldungen können über die Property _msg bereitgestellt werden.
• Die Mehrfachauswahl basiert auf dem nativen HTML-Attribut multiple.
• Deaktivierte Optionen (disabled) werden von Screenreadern weiterhin berücksichtigt und angekündigt. Dadurch kann die Anzahl der angekündigten Optionen von der tatsächlich auswählbaren Anzahl abweichen.
• Vermeiden Sie deaktivierte Optionen (disabled), sofern dies fachlich möglich ist. Sie können die Orientierung für Nutzende assistiver Technologien erschweren.

Konkrete Designentscheidungen

Entscheidung	Begründung
Verwendung des nativen HTML-Elements <select> ohne zusätzliche ARIA-Rolle	Das native Element stellt die erforderliche Semantik sowie die Unterstützung für Tastaturbedienung, Fokusverwaltung und Screenreader bereits bereit. Zusätzliche ARIA-Rollen sind daher nicht erforderlich.
Verwendung einer programmatisch verknüpften Beschriftung (_label)	Ermöglicht Screenreadern die eindeutige Zuordnung zwischen Beschriftung und Auswahlfeld.
Bereitstellung von Hinweisen und Fehlermeldungen über _msg	Unterstützt die barrierefreie Kommunikation von Validierungsfehlern und ergänzenden Informationen.

Links und Referenzen

Verwendung

Die Select-Komponente eignet sich insbesondere für:

• die Auswahl einer oder mehrerer Optionen aus einer vordefinierten Menge an Werten,
• strukturierte Formulareingaben,
• standardisierte Datenerfassung,
• Einfach- und Mehrfachauswahlen.

Die Select-Komponente sollte nicht verwendet werden, wenn:

• freie Eingaben möglich sein sollen oder bei einer Einfachauswahl eine Such- oder Filterfunktion benötigt wird. Verwenden Sie stattdessen eine Combobox.
• genau eine Option aus einer kleinen Auswahl (1–5) ausgewählt werden und/oder alle Optionen gleichzeitig sichtbar sein sollen. Verwenden Sie stattdessen eine Radio Group.

Tastatursteuerung

Hinweis: Da die Select-Komponente auf dem nativen HTML-Element <select> basiert, richtet sich die Tastatursteuerung nach Browser und Betriebssystem. Das konkrete Verhalten einzelner Tasten (insbesondere Enter und Leertaste) kann daher geringfügig variieren.

Taste	Funktion
Tab	Fokus auf die Komponente setzen
Shift+Tab	Zum vorherigen fokussierbaren Element wechseln
Pfeil-Tasten (oben / unten)	Zwischen den Optionen navigieren (auch bei geschlossener Auswahlliste möglich)
Enter	Auswahlliste öffnen, Auswahl einer Option (schließt die Auswahlliste)
Leertaste	Auswahlliste öffnen
Esc	Auswahlliste schließen

Bei Mehrfachauswahl (_multiple)

Taste	Funktion
Pfeil-Tasten (oben / unten)	Auswahl einer Option
Shift + Pfeil-Tasten	Auswahl aller hintereinanderliegenden Einträge
Strg + Pfeil-Tasten	Auswahl mehrerer einzelner Optionen
Leertaste	Auswahl einer weiteren Option

Best Practices / Empfehlungen

Auswahl der geeigneten Komponente

• Verwenden Sie die Select-Komponente ausschließlich für vordefinierte Auswahlmöglichkeiten.
• Nutzen Sie _multiple nur, wenn eine Mehrfachauswahl fachlich erforderlich ist. Eine Mehrfachauswahl kann für einige Nutzende schwer bedienbar sein. Prüfen Sie, ob stattdessen eine Checkbox Group besser geeignet ist.
• Prüfen Sie bei umfangreichen Auswahllisten, ob eine Combobox die geeignetere Komponente ist.

Gestaltung der Optionen

• Stellen Sie die Optionen über die Property _options als Array mit label und value bereit.
• Strukturieren Sie umfangreiche Auswahllisten mithilfe von Optionsgruppen (Optgroups).
• Verwenden Sie aussagekräftige und eindeutige Beschriftungen (label).
• Setzen Sie _required, wenn eine Auswahl zwingend erforderlich ist.

Vorauswahl und Platzhalter

• Treffen Sie keine automatische Vorauswahl personenbezogener Optionen (z. B. Anreden), sofern diese nicht fachlich begründet ist. Verwenden Sie stattdessen eine neutrale Option, damit Nutzende ihre Auswahl bewusst treffen können oder eine Radio Group.
• Sofern aus der Auswahlliste ein sinnvoller Standardwert hervorgeht, sollte dieser vorausgewählt werden. In diesem Fall sollte keine Leer-Option verwendet werden.
• Falls kein sinnvoller Standardwert existiert oder die Auswahl rechtliche bzw. finanzielle Konsequenzen hat, kann eine explizite, klar beschriftete Leer-Option verwendet werden (z. B. „Bitte auswählen“).

Anwendungsfälle

• Auswahl eines Bundeslandes
• Sprachauswahl
• Auswahl einer Organisationseinheit oder eines Fachbereichs
• Kategorieauswahl in Formularen
• Statusauswahl aus mehreren festgelegten Bearbeitungsständen

FAQ

Wann sollte ich die Select-Komponente verwenden?
Wenn Nutzende eine oder mehrere Optionen aus einer vordefinierten Liste auswählen sollen und keine freie Texteingabe erforderlich ist.

Wann eignet sich eine Combobox besser?
Wenn eine große Anzahl an Optionen zur Verfügung steht oder Nutzende gezielt nach Einträgen suchen sollen.

Wann eignet sich eine Radio Group besser?
Wenn genau eine Option aus einer kleinen Anzahl (ca. 1–5 Optionen) ausgewählt werden soll und alle Optionen gleichzeitig sichtbar sein können.

Unterstützt die Komponente Optionsgruppen?
Ja. Property _options unterstützt neben einzelnen Optionen auch Optionsgruppen (Optgroups), um umfangreiche Listen logisch zu strukturieren.

Unterstützt die Select-Komponente Mehrfachauswahl?
Ja. Über die Property _multiple kann zwischen Einfach- und Mehrfachauswahl gewechselt werden.

Warum verwendet die Komponente das native HTML-Element <select>?
Das native HTML-Element <select> stellt die erforderliche Semantik sowie die Unterstützung für Tastaturbedienung, Fokusverwaltung und Screenreader bereits bereit. Die KoliBri-Komponente ergänzt daher keine eigenen ARIA-Rollen und nutzt bewusst das standardisierte Verhalten des Browsers.

Konstruktion / Technik

Playground

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Funktionalitäten (mit Code)

Optionen und Beschriftung

Mindestangaben für eine funktionsfähige Select-Komponente: _label und _options.

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Mehrfachauswahl

Über _multiple können mehrere Optionen gleichzeitig ausgewählt werden. Mit _rows wird die sichtbare Höhe der Liste gesteuert.

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Formularattribute

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Hinweise und Fehlermeldungen

Message

<KolSelect _label="Bundesland" _options={[ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" }, { "label": "Berlin", "value": "BE" }, { "label": "Brandenburg", "value": "BB" }, { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Hessen", "value": "HE" }, { "label": "Mecklenburg-Vorpommern", "value": "MV" }, { "label": "Niedersachsen", "value": "NI" }, { "label": "Nordrhein-Westfalen", "value": "NW" }, { "label": "Rheinland-Pfalz", "value": "RP" }, { "label": "Saarland", "value": "SL" }, { "label": "Sachsen", "value": "SN" }, { "label": "Sachsen-Anhalt", "value": "ST" }, { "label": "Schleswig-Holstein", "value": "SH" }, { "label": "Thüringen", "value": "TH" } ]} />

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Eingabefeld wird angeklickt	–
focus	Eingabefeld wird fokussiert	–
blur	Eingabefeld verliert Fokus	–
input	Option wird ausgewählt	value-Attribut der Option
change	Option wird ausgewählt	value-Attribut der Option

API

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the key combination that can be used to trigger or focus the component's interactive element.	string | undefined	undefined
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hideLabel	_hide-label	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	boolean | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_icons	_icons	Defines the icon classnames (e.g. _icons="fa-solid fa-user").	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _description: string; } | string | undefined	undefined
_multiple	_multiple	Makes the input accept multiple inputs.	boolean | undefined	false
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_options (required)	_options	Options the user can choose from.	(Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string	undefined
_required	_required	Makes the input element required.	boolean | undefined	false
_rows	_rows	Maximum number of visible rows of the element.	number | undefined	undefined
_shortKey	_short-key	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	string | undefined	undefined
_tabIndex	_tab-index	Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	number | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_value	_value	Defines the value of the element.	StencilUnknown[] | boolean | null | number | object | string | undefined	undefined
_variant	_variant	Defines which variant should be used for presentation.	string | undefined	undefined

Methods

focus

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>

Returns the selected values.

Returns

Type: Promise<StencilUnknown | StencilUnknown[]>

Slots

Slot	Description
	The label of the input field.

---