║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Combobox description: An input combined with a list of predefined items to select.

links: doc: https://base-ui.com/react/components/combobox#api-reference

<ComponentPreview name="combobox-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/combobox

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="combobox" title="components/ui/combobox.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

Single Selection

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

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Combobox items={items}>
  <ComboboxInput placeholder="Select an item..." />
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

Multiple Selection

import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
} from "@/components/ui/combobox"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Combobox items={items} multiple>
  <ComboboxChips>
    <ComboboxValue>
      {(value: { value: string; label: string }[]) => (
        <>
          {value?.map((item) => (
            <ComboboxChip key={item.value} aria-label={item.value}>
              {item.label}
            </ComboboxChip>
          ))}
          <ComboboxInput
            placeholder={value.length > 0 ? undefined : "Select a Select an item..."}
            aria-label="Select an item"
          />
        </>
      )}
    </ComboboxValue>
  </ComboboxChips>
  <ComboboxPopup>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

API Reference

The ComboboxInput component extends the original Base UI component with a few extra props:

| Prop | Type | Default | Description | | ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------ | | size | "sm" \| "default" \| "lg" | "default" | The size variant of the input field. | | showTrigger | boolean | true | Whether to display a trigger button (chevron icon) on the right side of the input. | | showClear | boolean | false | Whether to display a clear button (X icon) on the right side of the input when there is a value. |

Examples

Disabled

<ComponentPreview name="combobox-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Small Size

<ComponentPreview name="combobox-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Large Size

<ComponentPreview name="combobox-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Label

<ComponentPreview name="combobox-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Auto Highlight

Automatically highlight the first matching option.

<ComponentPreview name="combobox-autohighlight" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Clear Button

<ComponentPreview name="combobox-with-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Groups

<ComponentPreview name="combobox-grouped" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Multiple Selection

<ComponentPreview name="combobox-multiple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Input Inside Popup

<ComponentPreview name="combobox-with-inner-input" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Form Integration

<ComponentPreview name="combobox-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Form Integration - Multiple

<ComponentPreview name="combobox-multiple-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║