Combobox
An autocomplete input with a filterable dropdown list for selecting values.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | T | Array<T> | - | The selected value. Use with v-model. |
multiple | boolean | - | Whether multiple items can be selected. |
open | boolean | - | Controlled open state. Use with v-model:open. |
disabled | boolean | false | Whether the combobox is disabled. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | T | Emitted when the selected value changes. |
update:open | boolean | Emitted when the open state changes. |
Sub-components
ComboboxAnchor
Positions the dropdown relative to the input.
ComboboxInput
Filterable text input.
| Prop | Type | Default | Description |
|---|---|---|---|
displayValue | (val: any) => string | - | Function to format the selected value for display. |
placeholder | string | - | Placeholder text when empty. |
ComboboxTrigger
Toggle button to open/close the dropdown.
ComboboxList
Dropdown list container.
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'popper' | 'item-aligned' | 'popper' | Positioning strategy. |
align | 'start' | 'center' | 'end' | 'center' | Horizontal alignment. |
sideOffset | number | 4 | Distance from anchor in pixels. |
ComboboxItem
Selectable option in the list.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | T | - | The option value. |
disabled | boolean | - | Disable this option. |
textValue | string | - | Text used for filtering when content is complex. |
ComboboxItemIndicator
Checkmark indicator for the selected item.
ComboboxGroup
Groups related options under a heading.
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | - | Group heading text. |
ComboboxEmpty
Shown when no options match the filter.
ComboboxSeparator
Visual divider between groups.
ComboboxCancel
Button to clear the selected value.