Combobox
stable 4.8 kB<hk-combobox>A select that also accepts what you typed. Matching is fuzzy, and anything with no match becomes a new value on Enter.
#autocomplete#search
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string[] | [] | Chosen values, custom entries included. Two-way bindable. |
| options | string[] | [] | Suggestions offered while typing. |
| allowCustom | boolean | true | Enter commits free text that matches nothing. |
| maxItems | number | null | null | Caps how many values can be chosen. |
| loading | boolean | false | Shows the async state while suggestions are fetched. |
Outputs
valueChangeEventEmitter<string[]>Emits on add and on remove.
searchEventEmitter<string>Debounced query, for server-side suggestions.
Keyboard
- Enter Commits the highlighted suggestion, or the typed text
- Backspace On an empty field, removes the last chip
- ↑ / ↓ Moves through suggestions
- Escape Dismisses the suggestion list
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-combobox-chip-bg | rgb(220 38 38 / 0.10) | Chip fill for a chosen value. |
| --hk-combobox-chip-text | #b91c1c | Chip label colour. |
Accessibility
- Backspace on an empty field peels the last chip — the behaviour every tag input is expected to have.
- Each chip carries its own labelled remove button, so removal never depends on the keyboard shortcut.
- The suggestion list is an aria-expanded combobox popup, announced as it filters.