shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
With Item Count in Trigger Combobox for React
A multi-select combobox that sums up the picked skills on its button.
A skill picker whose button reads 2 skills selected, with the plural worked out from the count. JavaScript and TypeScript start selected. Use it where the button has to stay narrow and the number of picks is the useful summary.
Preview
Installation
FAQ
How is the label built?
From the number of selected values: skill gets an s when there is more than one, so it reads 1 skill selected or 3 skills selected. With nothing picked it says Select skills....
What is selected at first?
JavaScript and TypeScript, the starting value of the selection the demo keeps.
Which skills are listed?
JavaScript, TypeScript, Python, Rust, Go and Java. The search box says Search skills..., and No skill found. shows when nothing matches.
How are picked skills marked?
ComboboxItem shows its check on every picked row, and a second pick clears it.
Related
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- Selected Items List Below ComboboxA multi-select combobox with a count on
- With Max Selections Limit ComboboxA multi-select combobox that stops at
- With Select All Option ComboboxA multi-select combobox with a Select All
- Groups with Item Counts ComboboxA combobox whose group headings show how
- With Checkboxes Visible ComboboxA multi-select combobox that marks each