Combobox

A high-quality, styled React combobox component built with @base-ui/react that renders an input combined with a list of predefined items to select.

The Combobox component combines a text input with a filterable dropdown popup for selecting from predefined option lists.

Usage

import { Combobox } from "@/components/ui/combobox";

const fruits = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
];

export function ExampleCombobox() {
  return (
    <Combobox.Root items={fruits}>
      <Combobox.InputGroup>
        <Combobox.Input placeholder="Select fruit..." />
        <Combobox.Clear />
        <Combobox.Trigger />
      </Combobox.InputGroup>
      <Combobox.Portal>
        <Combobox.Positioner sideOffset={4}>
          <Combobox.Popup>
            <Combobox.Empty>No items found.</Combobox.Empty>
            <Combobox.List>
              {(fruit) => (
                <Combobox.Item key={fruit.value} value={fruit}>
                  <Combobox.ItemIndicator />
                  <span>{fruit.label}</span>
                </Combobox.Item>
              )}
            </Combobox.List>
          </Combobox.Popup>
        </Combobox.Positioner>
      </Combobox.Portal>
    </Combobox.Root>
  );
}

Preview

Sizes

Small

Medium

Large

<Combobox.Root size="sm">...</Combobox.Root>
<Combobox.Root size="md">...</Combobox.Root>
<Combobox.Root size="lg">...</Combobox.Root>

Anatomy

import { Combobox } from "@base-ui/react/combobox";

<Combobox.Root>
  <Combobox.InputGroup>
    <Combobox.Input />
    <Combobox.Clear />
    <Combobox.Trigger />
  </Combobox.InputGroup>
  <Combobox.Portal>
    <Combobox.Positioner>
      <Combobox.Popup>
        <Combobox.Empty />
        <Combobox.List>
          <Combobox.Item>
            <Combobox.ItemIndicator />
          </Combobox.Item>
        </Combobox.List>
      </Combobox.Popup>
    </Combobox.Positioner>
  </Combobox.Portal>
</Combobox.Root>;

API Reference

Combobox.Root Props

Prop	Type	Default	Description
`items`	`Array`	`[]`	Predefined list of items available for selection.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Component size.
`multiple`	`boolean`	`false`	Enables multi-item selection with chips.
`value`	`any`	`undefined`	Controlled value.
`onValueChange`	`(value: any) => void`	`undefined`	Event handler called when selection changes.