Combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@zynactra/ui/combobox"

<Combobox items={regions}>
  <ComboboxInput placeholder="Choose a region" />
  <ComboboxContent>
    <ComboboxEmpty>No region found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

ComboboxList takes a render function, so the file using it needs "use client".

Examples

Multiple

multiple with ComboboxChips shows each choice as a removable chip. Anchor the list to the chips with useComboboxAnchor.

Search as you type

For lists too big to load up front. Set filter={null} so the combobox shows the server's results as they are, debounce the request, and use ComboboxEmpty for every state with no results: before typing, loading, no match and error. Type "fail" to see the error.

Guidelines

• Under about ten options, use Select or Radio Group instead.
• For search, keep the chosen item in items after selecting, or the input loses its label when the results change.
• Write ComboboxEmpty as what wasn't found ("No region found"), not "No results".
• Keep chips short. Past five or six selections, show a count instead.

API reference

Behaviour and props come from Base UI. See the Base UI Combobox docs.