Combobox

Picks a value from a list you can filter by typing.

When to use

Use when: Choosing from a long list where typing to filter is faster than scrolling.
Avoid when: The list has only a few options; use Select or Radio Group.

Installation

bunx shelf add combobox

The source lands in src/components/ui/combobox.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Combobox from "@/components/ui/combobox";

<Combobox.Root items={countries}>
  <Combobox.Input aria-label="Country" placeholder="Search countries" />
  <Combobox.Content>
    <Combobox.Empty>No countries found.</Combobox.Empty>
    <Combobox.List>
      {(country) => <Combobox.Item key={country} value={country}>{country}</Combobox.Item>}
    </Combobox.List>
  </Combobox.Content>
</Combobox.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.