Select

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

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Dropdown, Auswahlliste, Auswahlfeld

Beschreibung: Die Select-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Optionen ausgewählt werden können. Sie unterstützt Einfach- und Mehrfachauswahl sowie barrierefreie Bedienung über Tastatur und Screenreader.

Beispiel

Standard-Auswahlliste mit Pflichtfeld-Markierung:

Options (Label/Value/Disabled)

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

Barrierefreiheit

• Jede Select-Komponente benötigt eine sichtbare Beschriftung über _label. Diese wird von Screenreadern vorgelesen.
• Deaktivierte Optionen (disabled) werden von Screenreadern (z. B. NVDA) mitgezählt und können eine höhere Anzahl an Auswahlmöglichkeiten suggieren als tatsächlich verfügbar sind — daher möglichst vermeiden.
• Häufig wird die erste Option als Platzhalter angelegt und deaktiviert, um eine Auswahl zu erzwingen. Stattdessen sollte eine auswählbare Option mit leerem Wert verwendet werden.
• Das Ausblenden deaktivierter Optionen über aria-hidden wird von modernen Browsern blockiert und ist keine empfohlene Lösung.
• Bei Mehrfachauswahl (_multiple) müssen Nutzer:innen explizit über die Bedienung (Shift + Pfeiltasten) informiert werden.
• Fehlermeldungen werden über _msg übermittelt und von assistiven Technologien korrekt erkannt.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert das Auswahlfeld.
Enter	Öffnet bzw. schließt die Auswahlliste.
Pfeil-Tasten (oben / unten)	Wechselt das aktive Element in der Liste. Auch bei eingeklappter Liste aktiv.
Shift + Pfeil-Tasten	Wählt bei Mehrfachauswahl (_multiple) mehrere Einträge gleichzeitig aus.

Best Practices / Empfehlungen

• Übergeben Sie die Optionen über _options als Array mit label und value pro Eintrag.
• Verwenden Sie Select für feste, vordefinierte Auswahllisten. Für filterbare Suchen ist die Combobox-Komponente besser geeignet.
• Vermeiden Sie deaktivierte Optionen — nutzen Sie stattdessen eine auswählbare Option mit leerem Wert als Platzhalter.
• Setzen Sie _required, wenn eine Auswahl zwingend erforderlich ist, und validieren Sie serverseitig.
• Nutzen Sie _multiple bewusst: Mehrfachauswahl ist für viele Nutzer:innen schwer zu bedienen. Eine Checkboxgruppe kann eine verständlichere Alternative sein.

Anwendungsfälle

• Anredeauswahl in Kontaktformularen
• Länder- oder Sprachauswahl
• Kategorieauswahl in Formularen
• Filterkriterien in Suchmasken
• Mehrfachauswahl bei Einstellungen oder Tags

FAQ

Warum gibt Select beim Einzelwert eine Liste zurück? Im Single-Modus liefert Select ein Array mit einem Element. Verwenden Sie einen SingleSelectFormatter, um den Wert direkt als Einzelwert zu erhalten.

Kann ich Optionsgruppen verwenden? Ja, neben einfachen Optionsobjekten ({ label, value }) unterstützt _options auch Optgroup-Objekte.

Konstruktion / Technik

Playground

Options (Label/Value/Disabled)

Message

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

Funktionalitäten (mit Code)

Optionen und Beschriftung

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

Options (Label/Value/Disabled)

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

Mehrfachauswahl

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

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

Formularattribute

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

Hinweise und Fehlermeldungen

Message

<KolSelect _label="Anrede" _options={[{"label":"Herr","value":"Mr."},{"label":"Frau","value":"Mrs."},{"label":"Firma","value":"Company"}]} />

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" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _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

Methods

focus

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

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

Returns the selected values.

Returns

Type: Promise<StencilUnknown | StencilUnknown[]>

Slots

Slot	Description
	The label of the input field.

---