Combobox

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

<Combobox class="w-full max-w-sm">
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Installation

npx shadcn@latest add @fulldev/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox"

<Combobox class="w-full max-w-sm">
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Composition

Use this composition for a single-line input and a flat list:

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

Use ComboboxGroup, ComboboxLabel, and ComboboxSeparator to organize items:

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxGroup
        │   ├── ComboboxLabel
        │   ├── ComboboxItem
        │   └── ComboboxItem
        ├── ComboboxSeparator
        └── ComboboxGroup
            ├── ComboboxLabel
            ├── ComboboxItem
            └── ComboboxItem

Use ComboboxTrigger and ComboboxValue when composing a custom trigger. Use showClear on ComboboxInput when the input needs a clear control.

Examples

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

<Combobox
  class="relative w-full max-w-sm"
  placeholder="Choose a timezone..."
  defaultValue="cet"
>
  <ComboboxInput showClear />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No timezones found.</ComboboxEmpty>
      <ComboboxItem value="cet">Central European Time</ComboboxItem>
      <ComboboxItem value="est">Eastern Standard Time</ComboboxItem>
      <ComboboxItem value="pst">Pacific Standard Time</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

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

<Combobox class="w-full max-w-sm" placeholder="Search technologies...">
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxGroup>
        <ComboboxLabel>Frontend</ComboboxLabel>
        <ComboboxItem value="astro">Astro</ComboboxItem>
        <ComboboxItem value="nextjs">Next.js</ComboboxItem>
        <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      </ComboboxGroup>
      <ComboboxSeparator />
      <ComboboxGroup>
        <ComboboxLabel>Backend</ComboboxLabel>
        <ComboboxItem value="express">Express</ComboboxItem>
        <ComboboxItem value="fastify">Fastify</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Auto Highlight

Use autoHighlight to automatically highlight the first visible item after a non-whitespace query.

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

<Combobox
  class="w-full max-w-sm"
  placeholder="Search frameworks..."
  autoHighlight
>
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Trigger the combobox from a button and move the search input inside the popup.

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

<Combobox class="w-full max-w-sm" defaultValue="astro">
  <ComboboxTrigger
    class="border-input bg-background dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3"
  >
    <ComboboxValue>Select a framework...</ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput showTrigger={false} placeholder="Search frameworks..." />
    <ComboboxList>
      <ComboboxEmpty>No items found.</ComboboxEmpty>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Disabled

Use disabled on Combobox to disable interaction.

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

<Combobox class="w-full max-w-sm" placeholder="Select a framework" disabled>
  <ComboboxInput />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="nextjs">Next.js</ComboboxItem>
      <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search