Multi select
new 3.2 kB<hk-multi-select>A select that holds many values without growing without bound. Past maxChips the rest collapse into a "+n more" control, so a field with forty selections is the same height as one with two. Select-all acts on the filtered rows rather than the whole list, and reports that as an indeterminate state — the one detail a multi-select usually gets wrong.
#select#multiple#chips#tags#filter
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string[] | [] | Selected values. Supports two-way binding via [(value)]. |
| options | T[] | [] | Source rows. Objects or plain strings. |
| optionLabel | string | 'label' | Key read for the visible text when options are objects. |
| optionValue | string | 'value' | Key read for the emitted value. |
| groupBy | string | null | null | Key to bucket options under sticky group headers. |
| maxChips | number | 3 | Chips rendered before the rest collapse into "+n more". |
| selectAll | boolean | true | Shows the select-all row. Acts on the filtered rows only. |
| filter | boolean | true | Shows the type-ahead filter above the list. |
| maxSelected | number | null | null | Caps the selection. Further options disable rather than disappear. |
| placeholder | string | 'Select…' | Shown while nothing is selected. |
| disabled | boolean | false | Blocks interaction and dims the trigger. |
Outputs
changedEventEmitter<string[]>Fires on every add, remove and clear.
filteredEventEmitter<string>Filter text, debounced. For server-side search.
Methods
clear()() => voidEmpties the selection without closing the panel.
Keyboard
- Enter / Space Toggles the active option
- ↑ / ↓ Moves the active option
- Backspace Removes the last chip when the filter is empty
- Escape Closes the panel, keeping the selection
- ⌘A / Ctrl+A Selects every filtered option
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-ms-chip | rgb(220 38 38 / 0.10) | Chip background. |
| --hk-ms-chip-ink | #b91c1c | Chip text and remove control. |
| --hk-ms-panel-max | 13rem | Height at which the option list starts scrolling. |
Accessibility
- The panel is a listbox with aria-multiselectable, and each row carries aria-selected.
- Select-all reports aria-checked="mixed" when only some of the filtered rows are picked.
- Every chip’s remove control has its own label naming the option it drops.
- The collapsed "+n more" control is focusable, so an overflowing selection is never unreachable.