Combobox

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

Installation


pnpm dlx shadcn@latest add @shark-ui/combobox

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>

Examples

Default

On This Page

Installation Usage Examples Default