Forms

Combobox

A searchable select: an input-styled trigger opens a popover that filters options as you type.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { Combobox } from "@/components/ui/combobox";

Picking one value from a long list: countries, time zones, team members, repositories.
Any select where people already know what they are looking for and would rather type than scroll.

For short lists (under about 10 options), use Select.
For choosing several values, pair a list of checkboxes or Chips instead; Combobox selects one value.

Where Combobox earns its place: a list too long to scroll. Type "europe" or something with no match.

Inside a Field, next to other inputs. The placeholder doubles as the trigger's accessible name, so make it descriptive.

The trigger dims and will not open.

Single-select only. Does not spread native props. Exports the ComboboxOption type ({ value: string; label: string }).

Prop	Type	Default	Description
options	ComboboxOption[]	-	Required. The full list; filtering by label happens inside.
value	string	-	The selected option's value. Controlled only: hold it in state.
onValueChange	(value: string) => void	-	Called with the picked option's value. The popover then closes.
placeholder	string	"Select option"	Trigger text when nothing is selected.
searchPlaceholder	string	"Search…"	Placeholder for the search field in the popover.
disabled	boolean	-	Disables the trigger.
className	string	-	Classes for the trigger button.

The popover is Radix Popover: Escape or clicking outside closes it and focus returns to the trigger.
The search field is focused when the popover opens. Arrow Up and Down move the highlight, Enter picks it.
The trigger has aria-expanded. Its accessible name is the visible text (the selected label or the placeholder), so write a descriptive placeholder such as "Select time zone".
There is no aria-label prop and options are plain buttons without listbox semantics, so the highlighted option is not announced while arrowing. For screen reader heavy flows, prefer Select.