Combobox

Autocomplete input with a list of suggestions.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/combobox.json

Usage

Use a combobox for searchable selects, multi-select chips, and grouped suggestions.

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"];

export function Example() {
  return (
    <Combobox items={frameworks}>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

Use multiple with ComboboxChips / ComboboxChip for multi-select. Set showClear on ComboboxInput for a clear control. Object items need itemToStringValue.