SHEET 19
Multi Select
ui / form
Searchable multi-select with badge display, selection cap and hidden inputs for plain form posts.
- type
- ui
- files
- 1
- registry deps
- badge, button, command, popover
- npm deps
- lucide-react
installs
- components/ui/multi-select.tsx
- Badge display with +n overflow
- Optional selection cap
- Controlled or uncontrolled
Variations
one state per section
01
Multiple values
Badges collapse into “+n more” past maxDisplay. Backspace on the trigger drops the most recent one.
fluid
value: read:users, read:billing
02
Capped selection
At the cap, unselected rows disable themselves and the count announces the limit. Nothing silently refuses a click.
fluid
2 of 2 selected — limit reached
03
Loading options
Same treatment as the combobox, so the two controls behave identically in a form.
fluid
04
Invalid
For “pick at least one” validation. The ring and aria-invalid arrive together.
fluid
Pick at least one scope.
05
Disabled with a value
Existing badges stay readable; the clear button and the caret do not.
fluid