Docs
Combobox

Combobox

Input field with autocomplete & autosuggest functionalities.

Docs

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add combobox

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

Loading

Form

Virtualized

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

CalendarConfirmer