Combobox

Autocomplete input with a list of suggestions.

Installation

Add the combobox component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/combobox.json

Usage

tsx

import { Combobox } from "@/components/ui/combobox"

Examples

Default

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

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
]

<Combobox items={fruits}>
  <ComboboxInput placeholder="Select fruit..." />
  <ComboboxContent>
    <ComboboxEmpty>No results.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>