Browse the docs

Combobox

Searchable select: an input filters the option list as you type, arrow keys highlight, Enter selects and writes the label back into the input. Focus never leaves the input — the highlight travels via aria-activedescendant.

The native Select stays the right choice when a plain dropdown is enough; reach for Combobox when the list is long enough to search.

This component needs the combobox primitive — two ways to get it:

Copy: fetch /r/primitives/combobox.txt — one file with the shared core embedded — and save it as primitives/combobox.js.
Install: npm install @presetui/ui — the primitives are bundled, no second package — then use the Source · npm tab below, whose import already points at @presetui/ui/primitives/combobox.

Selected: none

Props

Prop	Values	Default	Description
`options`	`{ value, label }[]`	required	The full list; filtering happens inside.
`value` / `onValueChange`	string / function	—	Controlled selection.
`placeholder`	string	`"Search…"`	Input placeholder.
`emptyMessage`	string	`"No results"`	Shown when nothing matches.
`invalid`	boolean	`false`	Danger border and `aria-invalid`.
`className`	string	`""`	Applied to the input.

Notes

For async data, custom filtering, or custom option markup, compose the primitive directly: Combobox, ComboboxInput, ComboboxContent, ComboboxOption, ComboboxEmpty — you control inputValue and render whichever options match.