Forms

MultiSelect

Pick several options with checkboxes; the trigger sums up the picks. Search, Select all and Clear included.

Ant Design: Select mode="multiple"

import { MultiSelect } from '@alea/ui';

Examples

The trigger sums up the picks; search appears with many options.

Topics

2 picked

A short list without Select all, and a disabled one.

Plans

Regions

Pick several options from a list with checkboxes; the trigger summarizes the picks (Ant Select mode="multiple", Mantine MultiSelect).

Prop	Type	Default	Description
`items`required	`{ id: Key; label: string; description?: string \| undefined; }[]`	-	The options: id, label, optional description.
`defaultValue`	`Key[]`	-	The selected ids to start with.
`description`	`ReactNode`	-	Help text shown under the field.
`isDisabled`	`boolean`	-	Disables every part of it.
`label`	`ReactNode`	-	The visible label.
`onChange`	`((keys: Key[]) => void)`	-	Called with the selected ids.
`placeholder`	`string`	`'Select…'`	Shown while there is no value.
`searchable`	`boolean`	-	Adds a search field to the list. Default true when there are more than 8 items.
`showActions`	`boolean`	`true`	Adds "Select all" and "Clear". Default true.
`value`	`Key[]`	-	The selected ids (controlled).

Don't