Combobox

Autocomplete input with a list of suggestions.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/combobox.json

Usage

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

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

<Combobox items={frameworks}>
  <ComboboxInput className="w-56" placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No framework found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Multiple

Set multiple with ComboboxChips for a multi-select input with removable chips.

Next.js

Remix

Groups

Use ComboboxGroup and ComboboxCollection to organize items under labels.

Clear Button

Set showClear on ComboboxInput to show a clear button.

Disabled

Set disabled on Combobox to disable the entire input.