Combobox

Searchable single-value picker. Trigger uses Input chrome (signals “you can type”); the popover holds a Command filter. For enum-only, use Select.

Combobox vs Select

Use Combobox when the user benefits from typing to filter (long lists, tag-style fields, anything > ~10 options). Use Select for short, fixed enums where typing adds nothing.

Default

const [value, setValue] = React.useState<string>();

<Combobox
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "blueberry", label: "Blueberry" },
    { value: "grapes", label: "Grapes" },
    { value: "pineapple", label: "Pineapple" },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="Pick a fruit"
  triggerClassName="w-[260px]"
/>

Long list with custom search placeholder

<Combobox
  options={timezones}
  value={value}
  onValueChange={setValue}
  placeholder="Pick a timezone"
  searchPlaceholder="Search timezones…"
  triggerClassName="w-[300px]"
/>

Disabled

<Combobox
  options={fruits}
  defaultValue="apple"
  triggerClassName="w-[260px]"
  disabled
/>

Props

Prop	Type	Default
options	{ value: string; label: string; disabled?: boolean }[]	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—
placeholder	ReactNode	"Select…"
searchPlaceholder	string	"Search…"
emptyMessage	ReactNode	"No results."
disabled	boolean	false
triggerClassName	string	—

Composing manually

For groups, separators, async loading, or custom item rendering, drop down to Popover + Command directly — Combobox is just a thin wrapper on top.

Source

packages/react/src/components/combobox.tsx