Skip to content

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

Free

Collapsible Groups Combobox for React

A department combobox whose Engineering group starts open and whose Marketing group starts closed.

Each heading is a button with a chevron. Engineering starts open, with Software, Hardware, and QA. Marketing starts closed, with Content, Social Media, and SEO. A click on the heading toggles its rows.

Use it for a long grouped list when people usually need one section. Short groups can stay open under a Combobox label. In React, Base UI does not collapse the groups. The headings do.

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={departments}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select department..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search..." showTrigger={false} />
    <ComboboxEmpty>No department found.</ComboboxEmpty>
    <ComboboxList>
      {(group: Group) => (
        <ComboboxGroup items={group.items} key={group.value}>
          <ComboboxLabel>
            <button
              aria-expanded={!collapsed[group.value]}
              className="flex w-full items-center gap-1"
              data-group={group.value}
              onClick={handleToggle}
              type="button"
            >
              {collapsed[group.value] ? (
                <ChevronRightIcon aria-hidden="true" className="size-3" />
              ) : (
                <ChevronDownIcon aria-hidden="true" className="size-3" />
              )}
              {group.value}
            </button>
          </ComboboxLabel>
          {collapsed[group.value] ? null : (
{/* The rest of the file is under Installation. */}

FAQ

How is the collapsed state stored?

In a record of group names, which starts with Marketing collapsed. The heading button flips the entry for its group, read from a data-group attribute.

What is in each heading?

A button inside the group label with a ChevronRightIcon when closed or a ChevronDownIcon when open, then the group name. It sets aria-expanded to match.

What happens to the items of a closed group?

They aren't rendered, so the arrow keys skip them.

Which departments are listed?

Engineering: Software, Hardware and QA. Marketing: Content, Social Media and SEO. The button shows Select department... until one is picked.

Can the headings be toggled from the keyboard?

The arrow keys move through items only, so reach the heading buttons with Tab, or click them. For a list people mostly drive by keyboard, keep the groups open.

API Reference

Combobox

Sets items={departments}, placeholder="Select department...", placeholder="Search...", 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