Multi Select

ProNew

A popover list of checkboxes with search for picking several options, with an optional selection limit.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/multi-select

Prop	Type	Default	Description
`options`	`MultiSelectOption[]`	-	Options to choose from.
`value`	`string[]`	-	Controlled selected values.
`defaultValue`	`string[]`	`[]`	Initial values when uncontrolled.
`onValueChange`	`(value: string[]) => void`	-	Called with all selected values after a change.
`label`	`string`	`"Select options"`	Accessible name of the trigger and the option list.
`placeholder`	`string`	`"Choose options"`	Text shown when nothing is selected.
`maxSelected`	`number`	`Infinity`	Maximum number of selections. Extra options disable.
`disabled`	`boolean`	`false`	Disables the trigger.
`name`	`string`	-	Renders one hidden input per selected value for forms.

Also accepts all <div> props except onChange.

Field	Type	Description
`value`	`string`	Value stored when selected.
`label`	`string`	Text shown and searched.
`disabled`	`boolean`	Prevents selecting the option.

The trigger shows the first two selections as chips and a +N count for the rest.
Options are real checkboxes, so Tab and Space work inside the popover. The list is described by the "N selected" counter.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/multi-select

Prop	Type	Default	Description
`options`	`MultiSelectOption[]`	-	Options to choose from.
`value`	`string[]`	-	Controlled selected values.
`defaultValue`	`string[]`	`[]`	Initial values when uncontrolled.
`onValueChange`	`(value: string[]) => void`	-	Called with all selected values after a change.
`label`	`string`	`"Select options"`	Accessible name of the trigger and the option list.
`placeholder`	`string`	`"Choose options"`	Text shown when nothing is selected.
`maxSelected`	`number`	`Infinity`	Maximum number of selections. Extra options disable.
`disabled`	`boolean`	`false`	Disables the trigger.
`name`	`string`	-	Renders one hidden input per selected value for forms.

Also accepts all <div> props except onChange.

Field	Type	Description
`value`	`string`	Value stored when selected.
`label`	`string`	Text shown and searched.
`disabled`	`boolean`	Prevents selecting the option.

The trigger shows the first two selections as chips and a +N count for the rest.
Options are real checkboxes, so Tab and Space work inside the popover. The list is described by the "N selected" counter.