Combobox

Searchable dropdown that filters items as you type. Built on reka-ui. Use for pickers with many options where a flat Select feels cumbersome.

Basic

A simple combobox with a list of frameworks.

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

Next.js

SvelteKit

Multiple with options

Multiple selection over { value, label } options: chips show labels, fixed options cannot be removed, and a clear button empties the rest. Use this shape when the field stores ids rather than the text shown on screen.

Owner

Editor

Clear Button

Use the showClear prop to show a clear button. It replaces the trigger while a value is set.

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

Custom Items

You can render a custom component inside ComboboxItem.

Invalid

Use the aria-invalid prop to make the combobox invalid.

Disabled

Use the disabled prop to disable the combobox.

Auto Highlight

Use the autoHighlight prop to automatically highlight the first item on filter.

Input Group

Add an addon to the combobox by placing an InputGroupAddon inside ComboboxInput.

API Reference

Combobox

Prop	Type	Default	Description
`modelValue`	`any`	—	Selected value. Supports v-model.
`open`	`boolean`	—	Dropdown open state. Supports v-model:open.
`multiple`	`boolean`	`false`	Allow selecting several items.
`autoHighlight`	`boolean`	`false`	Highlight the first item on every filter change.
`openOnClick`	`boolean`	`true`	Open the list when the field is clicked.
`openOnFocus`	`boolean`	`false`	Open the list as soon as the field takes focus, including via keyboard.
`ignoreFilter`	`boolean`	`false`	Turn off the built-in filter and render the list yourself. Selected items then keep their place instead of disappearing as you pick.
`filterFunction`	`(items, search) => items`	—	Override default fuzzy filter.

Event	Description
`update:modelValue`	Fires when the selection changes. Enables v-model.
`update:open`	Fires when the dropdown opens or closes.

Slot	Description
`default`	Anchor, list, and item sub-components.

ComboboxInput

Prop	Type	Default	Description
`showTrigger`	`boolean`	`true`	Render the chevron button that opens the list. Set false when the input lives inside the list.
`showClear`	`boolean`	`false`	Render a clear button. It hides the chevron while a value is set.
`class`	`string`	—	Merged onto the surrounding InputGroup.

Event	Description
`update:modelValue`	Fires as the search text changes.

Slot	Description
`default`	Extra InputGroupAddon content, rendered inside the input group.

ComboboxAnchor / ComboboxTrigger / ComboboxClear

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	(ComboboxTrigger) Render into a child element such as a Button. The built-in chevron is skipped.
`disabled`	`boolean`	`false`	(ComboboxClear) Disable the clear button.

ComboboxChips / ComboboxChip / ComboboxChipsInput

Prop	Type	Default	Description
`modelValue`	`any[]`	`[]`	(ComboboxChips) Bind the same model as Combobox, so removing a chip also deselects the item.
`displayValue`	`(value) => string`	—	(ComboboxChips) Chip label for object values. Without it the value is rendered as-is.
`value`	`any`	—	(ComboboxChip) The entry in the model this chip represents.
`showRemove`	`boolean`	`true`	(ComboboxChip) Render the trailing remove button. Set false for options that cannot be removed.
`modelValue`	`string`	`""`	(ComboboxChipsInput) Search text. Supports v-model — required when you filter the list yourself.

ComboboxList

Prop	Type	Default	Description
`class`	`string`	—	Floating results panel. Forwards positioning props to reka-ui ComboboxContent.

ComboboxItem

Prop	Type	Default	Description
`value`	`any`	—	Value committed when the item is selected.
`disabled`	`boolean`	`false`	Disable selection of this item.

Event	Description
`select`	Fires when the item is chosen.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`A`	Typing in the input filters the options.
`↑`	Moves the highlight to the previous option.
`↓`	Moves the highlight to the next option.
`Home`	Jumps to the first option.
`End`	Jumps to the last option.
`Enter`	Selects the highlighted option.
`Esc`	Closes the dropdown.

Built on reka-ui Combobox, pairing a textbox input with a role=listbox of options.
The input exposes aria-expanded and aria-activedescendant tracks the highlighted option.

Color Picker Command

Combobox

Basic

Multiple

Multiple with options

Clear Button

Groups

Custom Items

Invalid

Disabled

Auto Highlight

Popup

Input Group

API Reference

Combobox

ComboboxInput

ComboboxAnchor / ComboboxTrigger / ComboboxClear

ComboboxChips / ComboboxChip / ComboboxChipsInput

ComboboxList

ComboboxItem

Accessibility