Combobox
Synonyms: Autocomplete, Select, Dropdown
The Combobox component creates a selection list that combines an input field with a list of selectable options displayed below.
Construction
Code
<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
Events
For the handling of events or callbacks, see
| Event | trigger | Value |
|---|---|---|
click | Input field is clicked | - |
focus | Input field is focused | - |
blur | Input field loses focus | - |
input | Value is changed by entering | Current value of the input field |
change | Entry has been completed | Current value of the input field |
Example
Usage
The choices are passed to the component as a JSON array via the _suggestions attribute.
Example of constructing the JSON array:
["Herr", "Frau", "Firma"]
Keyboard controls
| button | Function |
|---|---|
Tab | Focuses the selection field. |
Enter | If the listbox is open and an option is focused, this function selects the focused option and closes the listbox. If no option is focused, it just opens the listbox. |
ArrowDown | Opens the listbox when it is closed and moves the visual focus down one option when the listbox is open. |
ArrowUp | Opens the listbox when it is closed and moves the visual focus up one option when the listbox is open. |
Escape (Esc) | Closes the listbox and removes visual focus from the combobox without making a selection. |
Home | Moves visual focus to the first option in the listbox. |
End | Moves the visual focus to the last option in the listbox. |
PageUp(PageUp) | Jumps ten options up in the list box and focuses on the corresponding option. |
PageDown(PageDown) | Jumps ten options down in the list box and focuses on the corresponding option. |
Printable Characters | Focuses on the first option that begins with the pressed character. |
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 |
_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 |
_id | _id | [DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element. | string | 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" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _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 |
_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 |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_suggestions (required) | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | 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. | string | undefined | undefined |
Methods
getValue
getValue() => Promise<string>
Returns the current value.
Returns
Type: Promise<string>
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |