MultiSelect

Open in Playground

Select for several values. value is an array and onChange receives the new array; chosen options show as chips that can be removed one by one, and clearable (on by default) adds a clear-all button. Add searchable to filter the options by typing; Backspace in the empty input removes the last chip. The list stays open while picking. Same options shape as Select.

Minions

Kevin

Free-form values. creatable turns it into a tag input: type and press Enter or a comma to add the text as a value even if it is not in options; an Add "text" row (createLabel) offers the same, and onCreate(text) reports it. Text that matches an option picks that option, and nothing is added twice. Backspace in the empty input removes the last chip.

Banana types

Cavendish

Props

labelstring
Label text.
valuestring[]
Default: []
Selected values.
onChange(value: string[]) => void
Called with the new array of values.
options{ value, label, disabled? }[]
Options to choose from.
placeholderstring
Text shown when nothing is selected.
searchableboolean
Default: false
Let the user type to filter the options.
clearableboolean
Default: true
Show a clear-all button while something is selected.
creatableboolean
Default: false
Free-form values: Enter or a comma adds the typed text even if it is not in options (implies searchable). Duplicates are never added.
createLabel(text: string) => ReactNode
Default: Add "text"
Text of the create row.
onCreate(text: string) => void
Called with the new text when a value is created.
emptyTextstring
Default: 'No matches'
Text shown when a search matches nothing.
filter(query, option) => boolean
Custom matching; default is a case-insensitive "contains" on the label.
errorstring
Error message shown below the control; sets the invalid style.
disabledboolean
Default: false
Disable the control.
namestring
Adds a hidden input per selected value so they are submitted with a form.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

MultiSelect props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	string[]	`[]`	Selected values.
`onChange`	(value: string[]) => void	–	Called with the new array of values.
`options`	{ value, label, disabled? }[]	–	Options to choose from.
`placeholder`	string	–	Text shown when nothing is selected.
`searchable`	boolean	`false`	Let the user type to filter the options.
`clearable`	boolean	`true`	Show a clear-all button while something is selected.
`creatable`	boolean	`false`	Free-form values: Enter or a comma adds the typed text even if it is not in `options` (implies `searchable`). Duplicates are never added.
`createLabel`	(text: string) => ReactNode	`Add "text"`	Text of the create row.
`onCreate`	(text: string) => void	–	Called with the new text when a value is created.
`emptyText`	string	`'No matches'`	Text shown when a search matches nothing.
`filter`	(query, option) => boolean	–	Custom matching; default is a case-insensitive "contains" on the label.
`error`	string	–	Error message shown below the control; sets the invalid style.
`disabled`	boolean	`false`	Disable the control.
`name`	string	–	Adds a hidden input per selected value so they are submitted with a form.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.

Related hooks and theme:useDismissable