Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Nested/Hierarchical Groups Combobox for React

A country combobox grouped by region, with a chevron marking each country as a child of that region.

North America, Europe, and Asia each list three countries. Every country row starts with a small chevron, so it reads as a child of the region above it.

Use it for two-level data, such as regions and countries or teams and members. A deep tree, with expand and collapse, is a Tree View. In React, Base UI does not indent the children. The chevron does.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={countries}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select country..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search country..." showTrigger={false} />
    <ComboboxEmpty>No country found.</ComboboxEmpty>
    <ComboboxList>
      {(group: Group) => (
        <ComboboxGroup items={group.items} key={group.value}>
          <ComboboxLabel>{group.value}</ComboboxLabel>
          <ComboboxCollection>
            {(item: Item) => (
              <ComboboxItem className="gap-2" key={item.value} value={item}>
                <ChevronRightIcon
                  aria-hidden="true"
                  className="size-3 opacity-50"
                />
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxCollection>
        </ComboboxGroup>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

Is this a real tree?

No. It's one level of groups, each region a ComboboxGroup with its name as the heading. The chevron is what suggests the nesting.

How is the chevron drawn?

A ChevronRightIcon at size-3 opacity-50 before each country name, hidden from screen readers. The rows add gap-2 for the space.

Which countries are listed?

United States, Canada and Mexico under North America. United Kingdom, Germany and France under Europe. Japan, China and India under Asia.

What does the button show?

Select country... until a country is picked, then its name.

How would I show a third level?

A combobox list has one level of groups. For deeper trees, put the path in the label, such as Europe / Germany / Berlin, or use a Tree View.

API Reference

Combobox

Sets items={countries}, placeholder="Select country...", placeholder="Search country...", showTrigger={false}, items={group.items} and value={item}. The rest is on the Combobox page.

Button

Sets variant="outline". The rest is on the Button page.

All 42 combobox examples