For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Combobox

PreviousNext

Autocomplete input and command palette with filtering and selection.

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/combobox.json

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox/combobox";
<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

Basic

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Groups

"use client";

import {
  Combobox,
  ComboboxCollection,
  ComboboxContent,

Multiple

Use the multiple prop with ComboboxChips to select several items.

"use client";
import { Fragment } from "react";

import {
  Combobox,
  ComboboxChip,

Clear Button

Use showClear on ComboboxInput to render a clear button.

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Auto Highlight

Use the autoHighlight prop to highlight the first matching item.

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Invalid

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Disabled

"use client";

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,

Popup

"use client";

import { Button } from "@/components/ui/button";
import {
  Combobox,
  ComboboxContent,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import {
  Combobox,

API Reference

See the Base UI Combobox documentation for the full API.