Combobox

A composable combobox built on Base UI's Combobox primitive. Combines a text input with a popover list of options, supporting single and multi-select, chip-based multi-select, grouped options, and custom filtering.

"use client"

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

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt.js", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxDemo() {
  return (
    <Combobox>
      <ComboboxInput placeholder="Select framework..." />
      <ComboboxContent>
        <ComboboxList>
          <ComboboxEmpty>No framework found.</ComboboxEmpty>
          {frameworks.map((framework) => (
            <ComboboxItem key={framework.value} value={framework.value}>
              {framework.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Anatomy

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

<Combobox>
  <ComboboxInput placeholder="Search..." />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="apple">Apple</ComboboxItem>
      <ComboboxItem value="banana">Banana</ComboboxItem>
      <ComboboxItem value="cherry">Cherry</ComboboxItem>
    </ComboboxList>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
  </ComboboxContent>
</Combobox>

Examples

Basic combobox

<Combobox>
  <ComboboxInput placeholder="Select a fruit..." />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="apple">Apple</ComboboxItem>
      <ComboboxItem value="banana">Banana</ComboboxItem>
      <ComboboxItem value="cherry">Cherry</ComboboxItem>
    </ComboboxList>
    <ComboboxEmpty>No results found.</ComboboxEmpty>
  </ComboboxContent>
</Combobox>

With groups

Use ComboboxGroup and ComboboxLabel to organize options into labeled sections.

<Combobox>
  <ComboboxInput placeholder="Search frameworks..." />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxGroup>
        <ComboboxLabel>Frontend</ComboboxLabel>
        <ComboboxItem value="react">React</ComboboxItem>
        <ComboboxItem value="vue">Vue</ComboboxItem>
      </ComboboxGroup>
      <ComboboxSeparator />
      <ComboboxGroup>
        <ComboboxLabel>Backend</ComboboxLabel>
        <ComboboxItem value="express">Express</ComboboxItem>
        <ComboboxItem value="fastify">Fastify</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
  </ComboboxContent>
</Combobox>

Multi-select with chips

Use ComboboxChips, ComboboxChip, and ComboboxChipsInput for a tag-like multi-select experience.

<Combobox multiple>
  <ComboboxChips>
    {(value) => <ComboboxChip value={value}>{value}</ComboboxChip>}
    <ComboboxChipsInput placeholder="Add tags..." />
  </ComboboxChips>
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="react">React</ComboboxItem>
      <ComboboxItem value="vue">Vue</ComboboxItem>
      <ComboboxItem value="svelte">Svelte</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

With clear button

Set showClear on ComboboxInput to display a clear button when a value is selected.

<Combobox>
  <ComboboxInput placeholder="Search..." showClear />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="option-1">Option 1</ComboboxItem>
      <ComboboxItem value="option-2">Option 2</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

API Reference

Combobox

A re-export of Base UI's Combobox.Root. Manages the combobox state including open/closed, selected value, and input value.

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Whether multiple items can be selected.
`value`	`string \| string[]`	—	Controlled selected value.
`onValueChange`	`(value: string \| string[]) => void`	—	Callback when the selected value changes.
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when the popover opens or closes.
`children`	`ReactNode`	—

ComboboxInput

An input field wrapped in an InputGroup. Includes a built-in trigger chevron and optional clear button.

Prop	Type	Default	Description
`showTrigger`	`boolean`	`true`	Whether to show the dropdown trigger chevron.
`showClear`	`boolean`	`false`	Whether to show a clear button when a value is selected.
`disabled`	`boolean`	`false`	Whether the input is disabled.
`placeholder`	`string`	—	Placeholder text.
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxContent

The dropdown popover panel. Automatically renders inside a portal with a positioner.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	The preferred side of the anchor to render on.
`sideOffset`	`number`	`6`	Distance in pixels from the anchor.
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment along the anchor edge.
`alignOffset`	`number`	`0`	Offset for alignment.
`anchor`	`Element \| RefObject`	—	Custom anchor element for positioning.
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxList

The scrollable list container for combobox items.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxItem

A selectable option within the list. Renders a check icon when selected.

Prop	Type	Default	Description
`value`	`string`	—	Required. The value of the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxGroup

A grouping container for related combobox items.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxLabel

A label rendered above a ComboboxGroup.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxEmpty

A message displayed when no items match the search query.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxSeparator

A horizontal divider between groups or items.

Prop	Type	Default
`className`	`string`	—

ComboboxChips

A container that renders selected values as removable chips. Replaces ComboboxInput for multi-select layouts.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode \| (value: string) => ReactNode`	—

ComboboxChip

A single chip representing a selected value inside ComboboxChips.

Prop	Type	Default	Description
`value`	`string`	—	The selected value this chip represents.
`showRemove`	`boolean`	`true`	Whether to show the remove button.
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxChipsInput

A minimal text input for use inside ComboboxChips. Grows to fill available space.

Prop	Type	Default
`placeholder`	`string`	—
`className`	`string`	—

ComboboxTrigger

A trigger element that opens the combobox popover. Renders a chevron-down icon.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

ComboboxValue

Displays the currently selected value text.

Prop	Type	Default
`className`	`string`	—

ComboboxCollection

A virtual collection component for large datasets.

Prop	Type	Default
`children`	`ReactNode`	—