Combobox

Installation

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/combobox.json

Usage

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

<Combobox type="single">
  <ComboboxInput placeholder="Search fruit..." />
  <ComboboxContent>
    <ComboboxEmpty>No fruit found.</ComboboxEmpty>
    <ComboboxGroup heading="Fruits">
      <ComboboxItem value="apple">Apple</ComboboxItem>
      <ComboboxItem value="banana">Banana</ComboboxItem>
      <ComboboxItem value="blueberry">Blueberry</ComboboxItem>
      <ComboboxItem value="grapes">Grapes</ComboboxItem>
      <ComboboxItem value="pineapple">Pineapple</ComboboxItem>
    </ComboboxGroup>
  </ComboboxContent>
</Combobox>

Examples

Combobox

Command

<Combobox /> and <ComboboxPrimitive /> components can be composed to build a component similar to shadcn/ui's official Combobox component.

Custom Item

<Combobox /> is an abstraction over <ComboboxPrimitive />. To build your own custom item, you can use the <ComboboxPrimitive /> components directly. Similar to Radix UI's Select, the <ComboboxItemText /> component defines the text content that will be used for filtering - when users type in the search input, the combobox will filter items based on the text content of their <ComboboxItemText /> components.

Loading

Form

Virtualized

Visit the Virtualizer page for more information on how to virtualize a <Combobox />.