Skip to main content

Combobox

preview

Synonyme: Autocomplete, Select, Dropdown

Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.

Die Combobox-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.

Konstruktion

Code

<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>

Beispiel

Verwendung

Die Auswahlmöglichkeiten werden über das Attribut _suggestions als JSON-Array an die Komponente übergeben.

Beispiel für die Konstruktion des JSON-Array:

["Herr", "Frau", "Firma"]

Tastatursteuerung

TasteFunktion
TabFokussiert das Auswahlfeld.
EnterWenn die Listbox geöffnet ist und eine Option fokussiert ist, wählt diese Funktion die fokussierte Option aus und schließt die Listbox. Wenn keine Optionfokussiert ist, öffnet es nur die Listbox.
Pfeil nach unten (ArrowDown)Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach unten, wenn die Listbox geöffnet ist.
Pfeil nach oben (ArrowUp)Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach oben, wenn die Listbox geöffnet ist.
Escape (Esc)Schlißt die Listbox und entfernt den visuellen Fokus von der Combobox, ohne eine Auswahl zu treffen.
HomeBewegt den visuellen Fokus auf die erste Option in der Listbox.
EndBewegt den visuellen Fokus auf die letzte Option in der Listbox.
Seite mach oben(PageUp)Springt zehn Optionen nach oben in der Listbox und fokussiert die entsprechende Option.
Seite mach unten(PageDown)Springt zehn Optionen nach unten in der Listbox und fokussiert die entsprechende Option.
Druckbare ZeichenFokussiert die erste Option, die mit dem gedrückten Zeichen beginnt.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides 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 | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.stringundefined
_msg--Defines the properties for a message rendered as Alert component.undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "default" | "info" | "success" | "warning" | "error" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }undefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefinedundefined
_placeholder_placeholderDefines the placeholder for input field. To be shown when there's no value.string | undefinedundefined
_required_requiredMakes the input element required.boolean | undefinedfalse
_suggestions (required)_suggestionsSuggestions the user can choose from.W3CInputValue[] | stringundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the input.string | undefinedundefined

Methods

getValue

getValue() => Promise<string | undefined>

Returns

Type: Promise<string | undefined>

kolFocus() => Promise<void>

Returns

Type: Promise<void>

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

View example