GitHub

Combobox

A searchable select input that allows users to filter and select from a list of options

Docs API
Select a fruit from the list

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/combobox.json

Usage

import { 
  Combobox,
  ComboboxLabel,
  ComboboxControl,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxClearTrigger,
  ComboboxContent,
  ComboboxItem,
  ComboboxItemGroup,
  ComboboxItemGroupLabel,
} from "@/components/ui/combobox";
<Combobox>
  <ComboboxControl>
    <ComboboxInput />
    <ComboboxClearTrigger />
    <ComboboxTrigger />
  </ComboboxControl>
  <ComboboxContent>
    <ComboboxItemGroup>
      <ComboboxItemGroupLabel>Frameworks</ComboboxItemGroupLabel>
      {collection.items.map((item) => (
        <ComboboxItem item={item} key={item}>
          {item}
        </ComboboxItem>
      ))}
    </ComboboxItemGroup>
  </ComboboxContent>
</Combobox>