Combobox

A filterable Select — same options/value/onChange shape, but opens with a search field so a long list narrows as you type instead of requiring a scroll. Real DOM focus never leaves the search field; the active option is communicated via aria-activedescendant, the standard combobox pattern.

<Combobox defaultValue="fr" label="Country" />

Combobox vs. Select

Reach for Select when the list is short enough to scan at a glance (a handful of options) — Combobox adds a search field and the extra interaction it implies, which is overhead a short list doesn't need. Combobox earns its keep once a list is long enough that scrolling to find an option is slower than typing a few letters of it (a country picker, a searchable list of users).

Examples

Same options shape as Select — plain data, each entry's own disabled flag skips it:

<Combobox
  label="Country"
  placeholder="Choose a country…"
  options={[
    { value: "us", label: "United States" },
    { value: "ca", label: "Canada" },
    { value: "mx", label: "Mexico", disabled: true },
  ]}
/>

searchPlaceholder and emptyMessage are independent of the trigger's own placeholder — the first is shown inside the open popup's search field, the second only when a query matches nothing:

<Combobox
  label="Assignee"
  searchPlaceholder="Search people…"
  emptyMessage="No one matches that name."
  options={people}
/>

Props