SingleSelect

Synonyme: Dropdown, Auswahlfeld, Einfachauswahl, Auswahlliste mit Suche, Searchable Select

Beschreibung: Mit SingleSelect wählen Nutzende genau eine Option aus einer vordefinierten Liste aus. Die Liste lässt sich durch Texteingabe filtern, sodass auch in umfangreichen Listen schnell der passende Eintrag gefunden wird. Freie Eingaben werden nicht als Wert übernommen.

Die Komponente basiert auf einem nativen Texteingabefeld (input type="text"), das KoliBri nach dem WAI-ARIA-Pattern „Editable Combobox with List Autocomplete“ mit einer eigenen Auswahlliste (Listbox) verbindet. Es wird bewusst kein natives select-Element verwendet; Rollen, Zustände und Tastatursteuerung setzt KoliBri selbst um.

Im Eingabefeld wird die Beschriftung (label) der ausgewählten Option angezeigt; der Wert der Komponente (_value) entspricht dem value dieser Option.

Beispiel

Standard-SingleSelect mit Optionsliste:

<KolSingleSelect _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" } ]} _placeholder="Bitte wählen Sie eine Option" />

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.

• Der gewählte Zustand wird korrekt an assistive Technologien kommuniziert.

Konkrete Designentscheidungen

Entscheidung	Begründung
SingleSelect ist ein eigenes Widget mit filterbarer Auswahlliste und kein natives select.	Das native select-Element bietet keine Filterung per Texteingabe, und seine Darstellung lässt sich nur eingeschränkt gestalten. Die eigene Umsetzung ermöglicht eine filterbare Auswahl mit konsistentem Verhalten über alle unterstützten Plattformen hinweg.
Der Öffnen-/Schließen-Pfeil ist nicht Teil der Tab-Reihenfolge.	Er dient ausschließlich als zusätzliche Unterstützung für Maus- und Touch-Nutzende. Die gleiche Funktion steht über die Pfeiltasten im Eingabefeld zur Verfügung, sodass unnötige Tabstopps vermieden werden.
Liefert die Filterung keinen Treffer, wird die Meldung „Keine Ergebnisse gefunden.“ unmittelbar angesagt.	Eine leere Liste wäre für Screenreader-Nutzende sonst nicht wahrnehmbar.
Deaktivierte Optionen bleiben sichtbar, werden bei der Tastaturnavigation aber übersprungen.	Nutzende gelangen ohne Umwege zu auswählbaren Optionen, während die deaktivierten Optionen als Information sichtbar bleiben.

Links und Referenzen

Verwendung

• Verwenden Sie SingleSelect, wenn genau eine Option aus einer vordefinierten Liste gewählt werden soll.
• Übergeben Sie die Optionen über _options als Liste von Objekten mit label (angezeigte Beschriftung), value (Wert) und optional disabled.
• Der Wert (_value) entspricht dem value der gewählten Option. Ohne Auswahl bzw. nach dem Entfernen der Auswahl ist er null.
• Legen Sie mit _rows fest, wie viele Optionen in der geöffneten Liste ohne Scrollen sichtbar sind (Standard: 5).
• Sollen neben vordefinierten Werten auch freie Eingaben möglich sein, verwenden Sie stattdessen die Combobox.

Implizites Verhalten

• Ein Klick in das Eingabefeld oder auf den Pfeil öffnet bzw. schließt die Auswahlliste.
• Die Optionen werden über eine Substring-Suche ohne Beachtung der Groß-/Kleinschreibung gefiltert. Der Suchbegriff wird in den passenden Optionen hervorgehoben.
• Passt keine Option zur Eingabe, wird „Keine Ergebnisse gefunden.“ angezeigt.
• Verlässt der Fokus das Feld und entspricht der eingegebene Text exakt der Beschriftung einer Option (ohne Beachtung der Groß-/Kleinschreibung), wird diese Option automatisch ausgewählt.
• Wird die bereits ausgewählte Option erneut gewählt, werden keine Events ausgelöst.

Tastatursteuerung

Die Tastatursteuerung wird nicht vom Browser, sondern von KoliBri selbst umgesetzt.

Taste	Funktion
Tab	Fokus auf das Eingabefeld bzw. das nächste fokussierbare Element setzen. Eine geöffnete Liste wird dabei ohne Auswahl geschlossen.
Shift+Tab	Fokus auf das vorherige fokussierbare Element setzen. Eine geöffnete Liste wird dabei ohne Auswahl geschlossen.
Pfeil-Taste unten	Liste öffnen und Fokus auf den nächsten Eintrag setzen. Nach dem letzten Eintrag folgt wieder der erste.
Pfeil-Taste oben	Liste öffnen und Fokus auf den vorherigen Eintrag setzen. Vor dem ersten Eintrag folgt wieder der letzte.
Pos1/Ende	Bei geöffneter Liste Fokus auf den ersten/letzten Eintrag setzen.
Bild-Tasten (hoch/runter)	Bei geöffneter Liste Fokus um zehn Einträge nach oben/unten verschieben. Wird das Listenende über- bzw. der Listenanfang unterschritten, springt der Fokus zum ersten bzw. letzten Eintrag.
Enter	Ist eine Option fokussiert, wird sie ausgewählt und der Fokus in das Eingabefeld gesetzt. Ist die Liste geschlossen, wird sie geöffnet; eine bereits ausgewählte Option erhält dabei den Fokus. Liegt der Fokus auf dem Clear-Button, wird die Auswahl entfernt.
Leertaste	Ist eine Option fokussiert, wird sie ausgewählt, die Auswahlliste geschlossen und der Fokus in das Eingabefeld gesetzt. Ist die Liste geschlossen, wird sie geöffnet; eine bereits ausgewählte Option erhält dabei den Fokus. Liegt der Fokus auf dem Clear-Button, wird die Auswahl entfernt.
Esc	Liste ohne Auswahl schließen und Fokus in das Eingabefeld setzen. Der eingegebene Text bleibt erhalten.
Zeicheneingabe (Fokus im Eingabefeld)	Liste entsprechend der Eingabe filtern.
Buchstabe oder Ziffer (Fokus auf einem Eintrag)	Fokus auf den ersten Eintrag setzen, dessen Beschriftung mit dem eingegebenen Zeichen beginnt. Das Zeichen wird nicht in das Eingabefeld übernommen. Berücksichtigt werden nur die Buchstaben A–Z und Ziffern (keine Umlaute).

Hinweis: Deaktivierte Optionen werden von den Pfeiltasten, den Bild-Tasten und der Zeichensuche übersprungen.

Hinweis: Pos1 und Ende bewegen auch im Eingabefeld nicht den Textcursor.

Fokusmodell

Die Komponente orientiert sich am WAI-ARIA Authoring Practices Pattern „Editable Combobox with List Autocomplete“, weicht jedoch beim Fokusmodell davon ab: Während der Navigation innerhalb der Liste (Pfeiltasten, Pos1/Ende, Bild-Tasten) wird der Tastaturfokus auf den jeweils aktiven Eintrag verschoben. Im WAI-ARIA APG Pattern verbleibt der Fokus dagegen während der gesamten Interaktion im Eingabefeld.

Dieses Fokusmodell hat folgende Auswirkungen:

• Während der Navigation innerhalb der Liste kann kein weiterer Suchtext eingegeben werden.
• Buchstaben- und Zifferneingaben bei Fokus auf einem Eintrag setzen den Fokus auf den ersten Eintrag, dessen Beschriftung mit dem eingegebenen Zeichen beginnt.
• Nach dem Schließen der Liste bzw. nach einer Auswahl wird der Fokus in das Eingabefeld gesetzt.
• Verlässt der Fokus die Komponente, wird die Liste geschlossen.

Best Practices / Empfehlungen

• Verwenden Sie klare, verständliche Beschriftungen (_label), die den Zweck der Auswahl deutlich machen.
• Formulieren Sie die Beschriftungen der Optionen eindeutig und gut unterscheidbar – sie werden sowohl für die Filterung als auch für die Zeichensuche verwendet.
• Gestalten Sie die Optionsliste nicht zu lang; verwenden Sie bei Bedarf Gruppierung oder Pagination.
• Nutzen Sie den Placeholder (_placeholder) nur als ergänzende Hilfe, nicht als Ersatz für Beschriftung oder Hinweis.
• Überlegen Sie, ob ein sinnvoller Standardwert gesetzt werden sollte, um Fehlbedienungen zu minimieren.
• Geben Sie aussagekräftige Validierungsfehlermeldungen über _msg vor.
• Setzen Sie deaktivierte Optionen nur sparsam ein und erläutern Sie – falls für das Verständnis nötig – über _hint, warum eine Option nicht verfügbar ist.
• Bei vielen Optionen (mehr als 15) erwägen Sie eine andere Komponente wie eine Tabelle oder Combobox.
• Setzen Sie bei Bedarf einen expliziten Senden-/Absenden-Button, um Nutzenden Sicherheit zu geben.
• Bei nur wenigen Optionen können Radio-Buttons (InputRadio) übersichtlicher sein, da alle Optionen ohne Öffnen einer Liste sichtbar sind.

Anwendungsfälle

• Auswahl von Titel, Anrede oder Geschlecht in Formularen
• Wahl eines Landes, Bundeslandes oder einer Region
• Auswahl einer Kategorie oder eines Status
• Filterung nach einem einzigen Kriterium
• Auswahl eines Datums oder einer Uhrzeit aus vordefinierten Werten
• Einzelauswahl in Einstellungen oder Konfigurationen

FAQ

Kann ich einen eigenen Wert eingeben, der nicht in der Liste steht?
Nein. Der eingegebene Text dient nur zum Filtern der Optionen. Als Wert wird ausschließlich der value einer ausgewählten Option übernommen. Für freie Eingaben mit Vorschlägen verwenden Sie die Combobox.

Worin unterscheidet sich SingleSelect vom Select?
Das Select basiert auf dem nativen select-Element. SingleSelect ist ein eigenes Widget, das zusätzlich eine Filterung per Texteingabe bietet und sich damit besonders für umfangreiche Listen eignet.

Was passiert, wenn keine Option zur Eingabe passt?
In der Liste erscheint die Meldung „Keine Ergebnisse gefunden.“, die Screenreader unmittelbar ansagen.

Warum ist der Öffnen-/Schließen-Pfeil nicht per Tab erreichbar?
Der Öffnen-/Schließen-Pfeil dient ausschließlich als zusätzliche Unterstützung für Maus- und Touch-Nutzende. Die Auswahlliste kann vollständig über die Tastatur geöffnet und bedient werden, sodass kein zusätzlicher Tabstopp erforderlich ist.

Playground

Testen Sie die verschiedenen Eigenschaften der SingleSelect-Komponente:

Icons

Message

<KolSingleSelect _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 Auswahl

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.

<KolSingleSelect _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.

Die Properties werden 1:1 auf die gleichnamigen nativen HTML-Attribute des input-Elements übertragen. Bei deaktiviertem SingleSelect wird zusätzlich der Clear-Button ausgeblendet und die Auswahlliste lässt sich nicht öffnen.

<KolSingleSelect _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

<KolSingleSelect _hideMsg={false} _hint="Bitte wählen Sie das Bundesland Ihres Wohnsitzes." _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} />

Placeholder

Mit _placeholder zeigen Sie einen Platzhaltertext an, solange noch kein Wert eingegeben bzw. ausgewählt ist – etwa ein Format- oder Eingabebeispiel. Der Platzhalter ist kein Ersatz für die Beschriftung (_label), da er nach der Eingabe verschwindet und von assistiven Technologien nicht zuverlässig ausgegeben wird.

<KolSingleSelect _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" } ]} _placeholder="Bitte wählen Sie eine Option" />

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.

<KolSingleSelect _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

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

Deaktivierte Optionen

Einzelne Optionen deaktivieren Sie über disabled: true im jeweiligen Options-Objekt. Deaktivierte Optionen bleiben in der Liste sichtbar, werden von Screenreadern als nicht verfügbar ausgegeben, bei der Tastaturnavigation übersprungen und lassen sich nicht auswählen.

<KolSingleSelect _label="Versandart" _options={[ { "label": "Standardversand", "value": "standard" }, { "label": "Expressversand", "value": "express", "disabled": true }, { "label": "Abholung", "value": "pickup" } ]} />

Clear-Button

Mit _hasClearButton steuern Sie, ob ein Clear-Button angezeigt wird, über den der aktuelle Wert mit einer einzigen Aktion entfernt werden kann. Der Clear-Button ist standardmäßig aktiv und erscheint, sobald das Eingabefeld Text enthält. Er ist per Tastatur erreichbar und wird ausgeblendet, wenn die Komponente deaktiviert ist (_disabled). Sein zugänglicher Name wird von KoliBri übersetzt bereitgestellt (deutsch: „Auswahl entfernen“) und sehenden Nutzenden zusätzlich als Tooltip angezeigt.

Nach dem Entfernen der Auswahl wird die Auswahlliste geöffnet und der Fokus in das Eingabefeld gesetzt, sodass direkt eine neue Option gewählt werden kann. Dabei werden die Events input und change ausgelöst.

<KolSingleSelect _hasClearButton={true} _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" } ]} _value="BY" />

Sichtbare Optionen

Mit _rows legen Sie fest, wie viele Optionen in der geöffneten Auswahlliste gleichzeitig sichtbar sind. Weitere Optionen erreichen Nutzende durch Scrollen bzw. über die Tastatur. Ohne Angabe sind fünf Optionen sichtbar.

<KolSingleSelect _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" } ]} _rows={3} />

API

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Eingabefeld wird angeklickt	-
focus	Komponente erhält den Fokus	-
blur	Komponente verliert den Fokus	-
keydown	Taste wird im Eingabefeld gedrückt	-
input	Eine andere Option wird ausgewählt oder die Auswahl entfernt	value der ausgewählten Option
change	Eine andere Option wird ausgewählt oder die Auswahl entfernt	value der ausgewählten Option

Die Texteingabe zum Filtern der Optionen löst kein input-Event aus.

Overview

The SingleSelect component creates a dropdown list from which exactly one predefined option can be selected.

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 input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).	string | undefined	undefined
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hasClearButton	_has-clear-button	Shows the clear button if enabled.	boolean | undefined	true
_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
_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
_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>[] | string	undefined
_placeholder	_placeholder	Defines the placeholder for input field. To be shown when there's no value.	string | undefined	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
_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.	boolean | null | number | object | string | undefined	null
_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>

Returns the current value.

Returns

Type: Promise<StencilUnknown>

Slots

Slot	Description
	The label of the input field.

---