Select
stable 4.2 kB<hk-select>Single or multi select with typeahead filtering. The listbox is virtualised, so a few thousand options cost the same as a dozen.
#dropdown#picker
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | unknown | unknown[] | null | Selected value, or array when [multiple]. Two-way bindable. |
| options | HkOption[] | string[] | [] | Choices. Plain strings are accepted as shorthand. |
| multiple | boolean | false | Allows more than one selection and renders chips. |
| filterable | boolean | false | Adds the typeahead box to the panel. |
| placeholder | string | 'Select' | Shown when nothing is chosen. |
| virtualScroll | boolean | true | Windows the listbox. Turn off only for very short lists. |
| disabled | boolean | false | Blocks opening the panel. |
Outputs
valueChangeEventEmitter<unknown>Emits on selection.
opened / closedEventEmitter<void>Panel lifecycle, for lazy option loading.
Keyboard
- Space / Enter Opens the panel, or picks the active option
- ↑ / ↓ Moves the active option
- Home / End First / last option
- Escape Closes without changing the value
- Type a letter Jumps to the next option starting with it
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-select-panel-bg | #ffffff | Dropdown background. |
| --hk-select-option-hover | rgb(15 23 42 / 0.04) | Hovered and active option wash. |
| --hk-select-max-height | 14rem | Panel height before it scrolls. |
Accessibility
- Implements the listbox pattern: the trigger is a combobox, the panel a listbox, and aria-activedescendant tracks the active option without moving DOM focus.
- Selected state is exposed through aria-selected, never through colour alone.
- The panel is positioned from the trigger rect, so a scroll container cannot clip it.