shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Multi Select
With Max Selections Limit Combobox for React
A multi-select combobox that stops at three interests and disables the rest.
An interest picker capped at three. The button counts against the cap, as 2/3 selected, and once three are picked the other rows are disabled and a note says Maximum 3 selections reached. Use it where a hard limit applies, such as plan limits or a top-three choice.
Preview
Installation
FAQ
Where is the limit set?
In a MAX_SELECTIONS constant of 3. The demo compares the number of picks against it on every render.
How are the other rows disabled?
When the cap is reached, every row that isn't picked is disabled. Picked rows stay enabled so they can be unpicked.
Each ComboboxItem gets disabled.
Where does the limit note show?
Above the list, inside ComboboxContent, as a centered muted line. It only renders while the cap is reached.
What does the button show?
The count against the cap, as 1/3 selected, or Select interests... when nothing is picked.
Related
- With Item Count in Trigger ComboboxA multi-select combobox that sums up the
- Multiple Items with Badges ComboboxA multi-select combobox that shows each
- With Select All Option ComboboxA multi-select combobox with a Select All
- With Clear All Functionality ComboboxA multi-select combobox with a button
- With Checkboxes Visible ComboboxA multi-select combobox that marks each
- With Quick Filters ComboboxA combobox with filter buttons above the