Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/multi-selectMulti Select
Pick several values from one field. Picks show as removable chips that fold into a "+N" chip when they run out of room, with a clear button in the trigger. Checkbox rows stay open while you toggle them, groups and descriptions carry over from Select, and a footer offers Select all and Clear. An optional max disables the rest once it's reached.
Props
Other props pass through to the root element.
options*
(SelectOption | SelectOptionGroup)[]
Options, groups of options, or a mix. Consecutive loose options share an unlabelled group.
value
string[]
defaultValue
string[]
Default
[]onValueChange
(value: string[]) => void
label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
Default
"Select…"leading
React.ReactNode
A field icon before the chips.
size
SelectSize
Default
"md"max
number
The most options that can be picked. The rest disable once it's reached.
footer
boolean
Default
trueShows the "Select all" and "Clear" footer in the popup. Defaults to
true.clearable
boolean
Default
trueShows the clear button in the trigger once something is picked. Defaults to
true.disabled
boolean
required
boolean
name
string
Submits every picked value under this name with a surrounding form.
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
modal
boolean
Locks page scroll and outside clicks while open. Defaults to
true.triggerClassName
string
Classes for the trigger;
classNamegoes on the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | (SelectOption | SelectOptionGroup)[] | – | Options, groups of options, or a mix. Consecutive loose options share an unlabelled group. |
| value | string[] | – | |
| defaultValue | string[] | [] | |
| onValueChange | (value: string[]) => void | – | |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Optional". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger aria-invalid. |
| placeholder | React.ReactNode | "Select…" | |
| leading | React.ReactNode | – | A field icon before the chips. |
| size | SelectSize | "md" | |
| max | number | – | The most options that can be picked. The rest disable once it's reached. |
| footer | boolean | true | Shows the "Select all" and "Clear" footer in the popup. Defaults to true. |
| clearable | boolean | true | Shows the clear button in the trigger once something is picked. Defaults to true. |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits every picked value under this name with a surrounding form. |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| modal | boolean | – | Locks page scroll and outside clicks while open. Defaults to true. |
| triggerClassName | string | – | Classes for the trigger; className goes on the root. |
