Combobox

A searchable, filterable select composed from Base UI's Combobox primitive and the input-group pieces.

Install

pnpm dlx shadcn@latest add @namche/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from '@/components/ui/combobox';

const regions = [
  { value: 'eu-west-dornbirn', label: 'EU West — Dornbirn' },
  { value: 'us-east-ashburn', label: 'US East — Ashburn' },
];

<Combobox items={regions} value={region} onValueChange={setRegion}>
  <ComboboxInput placeholder="Select a region…" />
  <ComboboxContent>
    <ComboboxEmpty>No region matches your search.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

items takes the full option list; the list is filtered against the input text automatically as the user types (useFilter-based matching, no manual filter function needed). When item values follow the { value, label } shape, the combobox reads label for display and value for form submission on its own — itemToStringLabel/itemToStringValue are only needed for other shapes. ComboboxInput already composes an InputGroup internally, with a trigger chevron and an optional showClear clear button — don't wrap it in another InputGroup. For multi-select, swap ComboboxInput for ComboboxChips + ComboboxChipsInput, which render selected values as removable chips.

Combobox

Install

Usage

On this page