Skip to content

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

Free

Groups with Item Counts Combobox for React

A role combobox whose headings show the count: 3 in Development, 2 in Design, and 3 in Management.

Development lists three developer roles, Design lists UI Designer and UX Designer, and Management lists three manager roles. Each heading ends with how many roles it holds.

Use it when the size of a group helps people decide where to look. A heading with no count is a labeled Combobox group. In React, Base UI does not count the rows. The heading 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={roles}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select role..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search role..." showTrigger={false} />
    <ComboboxEmpty>No role found.</ComboboxEmpty>
    <ComboboxList>
      {(group: Group) => (
        <ComboboxGroup items={group.items} key={group.value}>
          <ComboboxLabel className="flex items-center justify-between">
            <span>{group.value}</span>
            <span className="text-muted-foreground text-xs">
              {group.items.length}
            </span>
          </ComboboxLabel>
          <ComboboxCollection>
            {(item: Item) => (
              <ComboboxItem key={item.value} value={item}>
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxCollection>
        </ComboboxGroup>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

How is the count placed in the heading?

The group label is flex items-center justify-between, with the group name in one span and the count in another, text-muted-foreground text-xs.

Where does the number come from?

From the length of the group's items. The list passes each group with the items left after the search, so the count drops as you type.

Which roles are listed?

Development: Frontend, Backend and Fullstack Developer. Design: UI and UX Designer. Management: Product, Project and Engineering Manager.

What does the button show?

Select role... until a role is picked, then its label.

Is the count read out?

Yes. It's part of the group label, so a screen reader hears Development 3 as the group's name. Write it as a phrase, such as 3 roles, if the number alone is unclear.

API Reference

Combobox

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