Select

Synonyme: Dropdown, Dropdown-Liste, Auswahlliste, Auswahlfeld

Beschreibung: Mit Select wählen Nutzende eine oder mehrere Optionen aus einer vordefinierten Liste aus.

Die Komponente basiert auf dem nativen HTML-Element <select> und profitiert dadurch von dessen Semantik sowie der standardisierten Unterstützung durch Browser und assistive Technologien.

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 die Einfachauswahl als aufklappbares Auswahlfeld oder die Mehrfachauswahl als Liste mit mehreren sichtbaren Zeilen. Die auswählbaren Optionen werden über _options bereitgestellt und können mithilfe von Optionsgruppen logisch strukturiert werden.

Beispiel

Standard-Auswahlliste ohne optional gesetzte Felder:

<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

• Das Eingabefeld muss mit einer aussagekräftigen Beschriftung versehen werden. Es darf visuell ausgeblendet werden, wenn der Zweck des Eingabefeldes durch den direkten visuellen Kontext absolut unmissverständlich ist.

• Im Fehlerfall wird die Fehlermeldung direkt an der Komponente dargestellt und automatisch mit ihr verknüpft, sodass sie auch assistiven Technologien zur Verfügung steht.

Konkrete Designentscheidungen

Entscheidung	Begründung
Verwendung des nativen HTML-Elements <select>	Rolle, Tastaturbedienung, Fokusverwaltung und Ansageverhalten stammen vollständig vom nativen Element und entsprechen damit dem gewohnten Verhalten des jeweiligen Browsers.
Deaktivierte Optionen bleiben für Screenreader wahrnehmbar	Deaktivierte Optionen werden nicht vor assistiven Technologien verborgen, da Browser das Verbergen einzelner Optionen ignorieren bzw. dadurch fehlerhaftes Verhalten entstand. Screenreader zählen und sagen sie daher mit an, sodass die Anzahl der angesagten Optionen von der Anzahl der auswählbaren Optionen abweichen kann.
Mindestgröße der Optionen bei Mehrfachauswahl	In der dauerhaft sichtbaren Liste der Mehrfachauswahl (_multiple) haben die Optionen eine Mindesthöhe, die der barrierefreien Mindestgröße für Bedienelemente entspricht.
Häkchen vor ausgewählten Optionen	Ausgewählte Optionen sind zusätzlich zur Hervorhebung durch ein vorangestelltes Häkchen erkennbar. Die Darstellung hängt davon ab, ob der Browser die Optionsliste mit den Stilen der Komponente rendert.

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 und 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 (ca. 1–5 Optionen) ausgewählt werden soll und alle Optionen gleichzeitig sichtbar sein sollen. Verwenden Sie stattdessen eine Radio Group.

Hinweis: Bei der Einfachauswahl erwartet _value einen einzelnen Wert, bei der Mehrfachauswahl (_multiple) ein Array. Werte, die in _options nicht vorkommen, werden verworfen. Ist bei der Einfachauswahl kein gültiger Wert gesetzt, wird – wie beim nativen <select> – automatisch die erste Option ausgewählt.

Tastatursteuerung

Die Tastaturbedienung wird durch den Browser und das Betriebssystem bestimmt. Daher können sich einzelne Tastaturfunktionen je nach Browser und Endgerät unterscheiden.

Typischerweise werden folgende Funktionen unterstützt:

Taste	Funktion
Tab	Fokus auf die Auswahlliste bzw. das nächste fokussierbare Element setzen.
Shift+Tab	Fokus auf das vorherige fokussierbare Element setzen.
Pfeil-Tasten (oben/unten)	Zwischen den Optionen wechseln. Je nach Browser wird die Auswahl auch bei geschlossener Auswahlliste direkt geändert.
Pos1 / Ende	Zur ersten bzw. letzten Option springen.
Buchstabentasten	Zur nächsten Option springen, deren Beschriftung mit dem eingegebenen Zeichen beginnt.
Leertaste / Enter	Auswahlliste öffnen bzw. die hervorgehobene Option übernehmen und die Auswahlliste schließen.
Alt+Pfeil-Taste unten	Auswahlliste öffnen (u. a. unter Windows).
Esc	Geöffnete Auswahlliste schließen.

Bei Mehrfachauswahl (_multiple)

Taste	Funktion
Pfeil-Tasten (oben/unten)	Fokus auf die nächste bzw. vorherige Option setzen und nur diese Option auswählen.
Shift+Pfeil-Tasten	Auswahl um die hintereinanderliegenden Optionen erweitern.
Strg+Pfeil-Tasten	Fokus verschieben, ohne die bestehende Auswahl zu verändern.
Strg+Leertaste	Fokussierte Option zur Auswahl hinzufügen bzw. aus ihr entfernen.

Hinweis: Unter macOS wird statt Strg in der Regel die Cmd-Taste verwendet.

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. Die Mehrfachauswahl erfordert Tastenkombinationen, die vielen Nutzenden nicht bekannt sind. Prüfen Sie, ob stattdessen eine Checkbox Group besser geeignet ist.
• Prüfen Sie bei umfangreichen Auswahllisten, ob eine Combobox die geeignetere Komponente ist.
• Zusätzliche ARIA-Rollen (z. B. role="combobox" oder role="listbox") sind nicht erforderlich und sollten nicht ergänzt werden.

Gestaltung der Optionen

• Stellen Sie die Optionen über _options als Array mit label und value bereit.
• Strukturieren Sie umfangreiche Auswahllisten mithilfe von Optionsgruppen.
• Verwenden Sie aussagekräftige und eindeutige Beschriftungen (label).
• Vermeiden Sie deaktivierte Optionen, sofern dies fachlich möglich ist. Screenreader sagen sie mit an, sodass die Anzahl der angesagten Optionen von der Anzahl der tatsächlich auswählbaren Optionen abweichen kann.
• Setzen Sie _required, wenn eine Auswahl zwingend erforderlich ist.

Vorauswahl und Leer-Option

• 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, oder eine Radio Group.
• Sofern aus der Auswahlliste ein sinnvoller Standardwert hervorgeht, sollte dieser über _value 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, stellen Sie eine explizite, klar beschriftete Leer-Option (z. B. „Bitte auswählen“) als erste Option in _options bereit. Die Komponente bietet hierfür keinen eigenen Platzhalter an.

Anwendungsfälle

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

FAQ

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. _options unterstützt neben einzelnen Optionen auch Optionsgruppen ({ label, options }), die als native optgroup-Elemente ausgegeben werden.

Warum wirkt sich _rows bei meiner Auswahlliste nicht aus?
_rows wird nur in Verbindung mit _multiple ausgewertet. Bei der Einfachauswahl bleibt die Komponente ein aufklappbares Auswahlfeld.

Gibt es einen Platzhalter für die Select-Komponente?
Nein. Die Komponente unterstützt kein _placeholder. Nutzen Sie bei Bedarf eine klar beschriftete Leer-Option als erste Option.

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.

Playground

Testen Sie die verschiedenen Eigenschaften der Select-Komponente:

Icons

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" } ]} />

Funktionalitäten

Einfache Auswahlliste

Jedes Feld benötigt mindestens ein Label (_label), um für alle Nutzenden verständlich und zugänglich zu sein. Das Label wird als natives label-Element mit dem Feld verknüpft.

Zusätzlich benötigt die Select-Komponente die auswählbaren Optionen (_options). Jede Option besteht aus einer Beschriftung (label) und einem Wert (value).

<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

Mit den folgenden Properties passen Sie das Feld an gängige Formularanforderungen an:

• _disabled: Deaktiviert das Feld. Deaktivierte Felder sind nicht fokussierbar und können nicht bearbeitet werden (mit Bedacht verwenden!).

• _required: Kennzeichnet das Feld als Pflichtfeld.

• _name: Legt den technischen Namen fest, unter dem der Wert mit dem Formular übermittelt wird.

Die Properties werden 1:1 auf die gleichnamigen nativen HTML-Attribute des select-Elements übertragen.

<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" } ]} />

Hinweistexte und Fehlermeldungen

Mit _hint und _msg geben Sie Nutzenden zusätzliche Orientierung zur Eingabe und machen Validierungsfehler unmittelbar am Feld sichtbar:

• _hint: Ergänzende Hinweise zur Eingabe (wird immer angezeigt und über aria-describedby mit dem Feld verknüpft)
• _msg: Fehlermeldungen oder Validierungshinweise (wird nur in Verbindung mit _touched angezeigt)
• _touched: Zeigt an, ob das Feld von Nutzenden bereits angefasst wurde, und steuert damit, ob _msg sichtbar wird
• _hideMsg: Unterdrückt die Fehlermeldung am Feld, wenn sie an anderer Stelle dargestellt wird

Hinweis: _msg wird erst dann eingeblendet, wenn _touched auf true gesetzt ist. So werden Validierungsfehler nicht bereits beim ersten Rendern, sondern erst nach einer Interaktion mit dem Feld angezeigt. Handelt es sich um eine Fehlermeldung, wird das Feld zusätzlich über aria-invalid als ungültig gekennzeichnet.

Anwendungsfall für _hideMsg: Besteht eine fachliche Einheit aus mehreren Eingabefeldern innerhalb eines Field-Sets, beispielsweise ein sechsstelliger Bestätigungscode mit einem einzelnen Feld je Stelle, kann eine gemeinsame Fehlermeldung für die gesamte Gruppe sinnvoller sein als eine Meldung je Einzelfeld. In diesem Fall unterdrücken Sie die Fehlermeldung an den einzelnen Feldern über _hideMsg und stellen sie stattdessen einmalig am Field-Set dar.

Wichtig: _hideMsg blendet die Fehlermeldung nicht nur visuell aus. Die Meldung wird weder gerendert noch über aria-describedby mit dem Feld verknüpft – lediglich die Kennzeichnung über aria-invalid bleibt erhalten. Stellen Sie daher sicher, dass die gemeinsame Fehlermeldung auf Anwendungsebene für alle Nutzenden, auch für Nutzende assistiver Technologien, wahrnehmbar ist.

Message

<KolSelect _hideMsg={false} _hint="Wählen Sie das Bundesland Ihres Hauptwohnsitzes." _label="Bundesland" _msg={{ "_description": "Bitte wählen Sie ein Bundesland aus." }} _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" } ]} _touched={true} />

Mehrfachauswahl

Mit _multiple erlauben Sie die Auswahl mehrerer Optionen. Die Komponente wird dann nicht mehr als aufklappbares Auswahlfeld, sondern als Liste mit mehreren sichtbaren Zeilen dargestellt. _value erwartet in diesem Fall ein Array der ausgewählten Werte.

Mit _rows legen Sie fest, wie viele Optionen gleichzeitig sichtbar sind. _rows wird ausschließlich in Verbindung mit _multiple als natives size-Attribut gesetzt.

Die Optionen der Mehrfachauswahl haben eine Mindesthöhe, die der barrierefreien Mindestgröße für Bedienelemente entspricht, und können so auch mit Maus und Touch sicher getroffen werden.

<KolSelect _label="Bundesländer" _multiple={true} _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" } ]} _rows={5} />

Optionsgruppen

Umfangreiche Auswahllisten strukturieren Sie mit Optionsgruppen. Eine Optionsgruppe wird in _options als Objekt mit label und einem eigenen Array options angegeben und als natives optgroup-Element ausgegeben. Die Beschriftung der Gruppe wird von Screenreadern beim Navigieren durch die Optionen mit angesagt; sie ist selbst nicht auswählbar.

Hinweis: disabled: true an einer Optionsgruppe wirkt derzeit nicht; die Optionen der Gruppe bleiben auswählbar (). Deaktivieren Sie stattdessen die einzelnen Optionen.

<KolSelect _label="Bundesland" _options={[ { "label": "Norddeutschland", "options": [ { "label": "Bremen", "value": "HB" }, { "label": "Hamburg", "value": "HH" }, { "label": "Schleswig-Holstein", "value": "SH" } ] }, { "label": "Süddeutschland", "options": [ { "label": "Baden-Württemberg", "value": "BW" }, { "label": "Bayern", "value": "BY" } ] } ]} />

Deaktivierte Optionen

Einzelne Optionen deaktivieren Sie über die Eigenschaft disabled der jeweiligen Option. Deaktivierte Optionen bleiben sichtbar und werden von Screenreadern angesagt, können aber nicht ausgewählt werden. Setzen Sie deaktivierte Optionen sparsam ein (siehe Best Practices / Empfehlungen).

<KolSelect _label="Zustellart" _options={[ { "label": "Standardversand", "value": "standard" }, { "label": "Expressversand", "value": "express" }, { "label": "Abholung (derzeit nicht verfügbar)", "value": "pickup", "disabled": true } ]} />

Label ausblenden

Mit _hideLabel blenden Sie das Label visuell aus, um das Feld kompakter zu gestalten. Für assistive Technologien bleibt die Beschriftung als zugänglicher Name (aria-label) weiterhin verfügbar; sehende Nutzende erhalten sie bei Maus-Hover und Tastaturfokus als Tooltip.

<KolSelect _hideLabel={false} _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" } ]} />

Icons

Mit _icons versehen Sie das Feld links und/oder rechts mit zusätzlichen Icons, um visuellen Kontext zu geben.

Verfügbare Positionen sind:

• left: Icon links vom Feld
• right: Icon rechts vom Feld

Wird ein Icon nur über seine Icon-Klasse angegeben, gilt es als dekorativ und wird vor assistiven Technologien verborgen. Trägt ein Icon eine Information, die nicht bereits aus Label oder Hinweis hervorgeht, übergeben Sie es als Objekt mit label – das Icon erhält dann eine zugängliche Beschriftung.

Icons

<KolSelect _icons={{ "left": "kolicon-house" }} _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" } ]} />

API

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Auswahlliste wird angeklickt	-
focus	Auswahlliste wird fokussiert	-
blur	Auswahlliste verliert Fokus	-
keydown	Taste wird in der Auswahlliste gedrückt	-
input	Auswahl wird geändert	Wert der ausgewählten Option (bei _multiple: Array der ausgewählten Werte)
change	Auswahl wurde abgeschlossen	Wert der ausgewählten Option (bei _multiple: Array der ausgewählten Werte)

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
_ariaDetails	_aria-details	References an external element by ID that provides accessible details for this select.	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.	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_infoPopover	_info-popover	Defines the informational popover after the label.	any	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 | string[] | undefined	undefined

Methods

focus

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

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

Returns the selected values.

Returns

Type: Promise<StencilUnknown | StencilUnknown[]>

Slots

Slot	Description
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---