Multi Select

Pick several options from a searchable list; the picks show as removable chips.

$ pnpm dlx shadcn@latest add https://dashral.com/r/multi-select.json

Notify by

Email
Push

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/multi-select.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/multi-select

Usage

example.tsx

1import { MultiSelect } from "@/components/dashral/multi-select"
2
3<MultiSelect
4  label="Labels"
5  defaultValue={["bug"]}
6  options={[
7    { value: "bug", label: "Bug" },
8    { value: "feature", label: "Feature" },
9    { value: "docs", label: "Docs" },
10  ]}
11/>

Examples

Limited picks

maxSelected caps the picks; maxShown collapses the rest into +N.

Top skills

React
TypeScript

Up to 3. After two, the rest show as +1.

Campaign audience

Segments with their sizes, and an estimate of the people reached (overlap removed).

Black Friday preview

Email campaign · draft

Send to

VIP (5+ orders) · 640
Abandoned cart · 470

Reaches about 1,021 people

overlap removed

API reference

MultiSelect

Prop	Type	Default
`options`	`{ value: string; label: string; disabled?: boolean }[]` Required.	—
`value / defaultValue`	`string[]` Picked values, controlled or initial.	`[]`
`onValueChange`	`(value: string[]) => void` Called with the new value.	—
`maxShown`	`number` Chips shown before the rest collapse into “+N”.	`3`
`maxSelected`	`number` At most this many picks.	—
`placeholder / searchPlaceholder / emptyText`	`string`	—
`id / disabled / aria-label / className`	className styles the box.	—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, box, content, item }` Classes for each part.	—

Keyboard

Keys	Action
`Enter`or`Space`or`↓`	Open the list
`Type`	Filter the list
`↓`or`↑`	Move through the options
`Enter`	Pick or unpick the highlighted option
`Backspace`	Remove the last pick (on the closed field)
`Tab`	Reach each chip's remove button
`Escape`	Close

Accessibility

Picked options say “selected”; each chip's remove button names the option; the trigger says how many are picked.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.