Skip to content

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

Free

Multiple Groups with Labels Combobox for React

A technology combobox with Frontend and Backend labels: React, Vue, and Angular, then Node.js, Python, and Ruby.

React, Vue, and Angular sit under Frontend. Node.js, Python, and Ruby sit under Backend. Each group keeps its label while it still has matches.

Use it when options fall into a few categories and the labels help people scan. A list this short can also be a grouped Select. In React, Base UI hides a group once a search clears it out.

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={technologies}>
  <ComboboxTrigger
    render={
      <Button className="w-[200px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select technology..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search..." showTrigger={false} />
    <ComboboxEmpty>No technology found.</ComboboxEmpty>
    <ComboboxList>
      {(group: Group) => (
        <ComboboxGroup items={group.items} key={group.value}>
          <ComboboxLabel>{group.value}</ComboboxLabel>
          <ComboboxCollection>
            {(item: Item) => (
              <ComboboxItem key={item.value} value={item}>
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxCollection>
        </ComboboxGroup>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

How are the groups built?

The data is a list of groups. Each ComboboxGroup gets its items, a ComboboxLabel, and a ComboboxCollection that renders the items.

Which technologies are listed?

React, Vue and Angular under Frontend. Node.js, Python and Ruby under Backend.

What does the button show?

Select technology... until one is picked, then its label.

How are the labels announced?

Each group is a group in the list, named by its label, so screen readers say Frontend or Backend when the highlight moves into it.

Can I add a line between the groups?

Yes, put a ComboboxSeparator between them, as in Categories with Separators.

API Reference

Combobox

Sets items={technologies}, placeholder="Select technology...", 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