Skip to content

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

Free

Groups with Item Counts Combobox for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI does not count the rows. The heading does.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Combobox collection={collection} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
          buttonVariants({ variant: "outline" }),
          "w-[250px] justify-between"
        )} bind:ref={triggerRef}>{#if selected}{selected.label}{:else}{"Select role..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search role..." showTrigger={false} /><ComboboxEmpty>No role found.</ComboboxEmpty><ComboboxList>{#each groups as [group, items] (group)}<ComboboxGroup><ComboboxGroupLabel class="flex items-center justify-between"><span>{group}</span><span class="text-muted-foreground text-xs">{items.length}</span></ComboboxGroupLabel>{#each items as item (item.value)}<ComboboxItem item={item}>{item.label}</ComboboxItem>{/each}</ComboboxGroup>{/each}</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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

All 42 combobox examples