Combobox

A searchable dropdown that combines a text input with a listbox. Useful for long option lists where filtering is beneficial.

Basic

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
]

<Combobox
  options={frameworks}
  value={value}
  onValueChange={setValue}
  placeholder="Select a framework..."
  emptyMessage="No framework found."
/>

Direction

The chevron indicator and selected-check icon placement flip automatically in RTL — the chevron sits on the start edge (right in RTL) alongside the label. The popover anchors to the trigger and mirrors open-direction, so filtered results still read in the expected order.

API Reference

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	`[]`	The list of selectable options.
`value`	`string`	`""`	The controlled selected value.
`onValueChange`	`(value: string) => void`	—	Callback fired when the selected value changes.
`placeholder`	`string`	`"Select..."`	Placeholder text when no value is selected.
`emptyMessage`	`string`	`"No results found."`	Text displayed when no options match the search query.

Accessibility

Combobox follows the ARIA combobox pattern via Radix Popover + CMDK Command. It supports full keyboard navigation: arrow keys to move through options, Enter to select, Escape to close the listbox.

Always provide a label via Field + FieldLabel or an explicit aria-label. Without one, screen readers will announce the combobox without context.

For multi-select, selected items are rendered as removable Badges. Each remove button has an aria-label identifying which item it removes.