Combobox

About

The Combobox component is built on top of Base UI, providing an accessible and flexible autocomplete input with a list of suggestions.

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/combobox.json

Usage

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"];

<Combobox items={frameworks}>
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No items found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Examples

Multiple Selection

Use multiple with chips for multi-select behavior.

Clear Button

Use the showClear prop to show a clear button that clears the selection.

Groups

Use ComboboxGroup, ComboboxLabel, and ComboboxSeparator to organize items into groups.

Custom Items

Render custom components inside ComboboxItem for more complex item layouts.

Invalid State

Use the aria-invalid prop to indicate validation errors.

Disabled State

Use the disabled prop to disable the combobox.

Auto Highlight

Use the autoHighlight prop to automatically highlight the first matching item.

Popup Mode

Trigger the combobox from a button or any other component by moving the ComboboxInput inside the ComboboxContent.

With Icon

Add an icon to the combobox using the InputGroupAddon component.

API Reference

This component is built on top of Base UI Combobox.  See the Base UI documentation for the full API reference.