Multi Select
Tag-style multiple-choice picker. Selected items render as removable chips inside the input. Supports search, fixed (un-removable) items, and disabled items.
Default
Select multiple tags from a list.
With fixed
Mark some options fixed so they cannot be removed.
Open on focus
Pass openOnFocus to open the dropdown as soon as the input is focused.
API Reference
Props, events, and slots for each sub-component.
MultiSelect
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | Option[] | [] | Selected options. Supports v-model. |
| query | string | "" | Search text. Supports v-model:query. |
| options | Option[] | [] | All available options. Each: { value, label, disabled?, fixed? }. |
| defaultOptions | Option[] | — | Options pre-selected on mount. |
| placeholder | string | "Select" | Placeholder text when nothing is selected. |
| hideClearAllButton | boolean | false | Hide the clear-all control. |
| openOnFocus | boolean | false | Open the dropdown when the input gains focus. |
| openOnClick | boolean | false | Open the dropdown on click. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the selected options change. Enables v-model. |
| update:query | Fires as the search text changes. Enables v-model:query. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| A | Typing in the input filters the options. |
| ↑ | Moves the highlight to the previous option. |
| ↓ | Moves the highlight to the next option. |
| Enter | Adds the highlighted option as a tag. |
| Backspace | Removes the last tag when the input is empty. |
| Esc | Closes the dropdown. |
- Combines a tags-input with a role=listbox of options.
- Selected items render as removable chips that expose a remove control.