Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Combobox examples · Grouped

Groups with Item Counts Combobox for React

A combobox whose group headings show how many roles each group holds.

Framework
UI library

A role picker in three groups, Development, Design and Management, with the number of roles at the end of each heading. Use it when the size of each group helps people decide where to look, as in team or category pickers.

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

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.

All 42 combobox examples