Multi Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/selectSelect
The everyday select, sized to sit flush beside a text field: label, hint, description and error, a placeholder, a leading icon, labelled groups with separators, a quiet second line per option, disabled options and three sizes. The popup can open over the trigger with the picked option on the value, and typeahead, Home/End and Escape come from Base UI.
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 | null
defaultValue
string | null
Default
nullonValueChange
(value: string | null) => 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 value. A picked option's own icon takes its place.
size
SelectSize
Default
"md"disabled
boolean
required
boolean
name
string
Submits the value with a surrounding form.
alignItemWithTrigger
boolean
Default
trueOpens the popup over the trigger with the picked option sitting on the value, like a native macOS menu (mouse only; touch and tight spaces fall back to dropping below). Set
falseto always drop bel…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 | null | – | |
| defaultValue | string | null | null | |
| onValueChange | (value: string | null) => 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 value. A picked option's own icon takes its place. |
| size | SelectSize | "md" | |
| disabled | boolean | – | |
| required | boolean | – | |
| name | string | – | Submits the value with a surrounding form. |
| alignItemWithTrigger | boolean | true | Opens the popup over the trigger with the picked option sitting on the value, like a native macOS menu (mouse only; touch and tight spaces fall back to dropping below). Set false to always drop bel… |
| 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. |
