Multi select presents user with a set of options and allows to select many of them.
Select should be disabled, when user shouldn't be allowed to interact with it.
Individual options can be disabled too.
You can also provide a custom message when an option is disabled:
Mark select as loading, when options are fetched on the fly and are not yet available.
Invalid select indicates that current value isn't what the system expects.
Clearable select should be used when empty selection is acceptable.
Options can display an additional descriptive text underneath the label.
Options can display an additional accessory view before the label. You can show an image using an image accessory. This is useful for showing logos when selecting sources or destinations, for example.
Icons can be accessories too.
You don't have to create objects with label and value keys as shown in the examples above.
MultiSelect supports any objects, as long as you provide a label and value for each option via optionLabel and optionValue functions.
description may be replaced with the optionDescription function.
There's a version of MultiSelect called GroupedMultiSelect, that supports groups of options.
Use the heavy variant to emphasize the multi select when in views with many selects or in-line with text.
Use the alternative variant to deemphasize the multi select when there are many selects.
The size prop impacts font-size and height. Default is set to md.
To set the width, use the width prop instead.
When rendering smaller-width selects, you may end up with options that are quite tall. To make the options easier to read, pass in a specific width for the popover using popoverWidth.
It is recommended to match widths, when possible.
Show a header section within the select when the options are displayed.
| Name | Default | Description |
|---|
| Name | Default | Description |
|---|