hightouch

Multi Select

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.

#

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 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.

#

There's a version of MultiSelect called GroupedMultiSelect, that supports groups of options.

#

When user should be able to select multiple options at once.

#

When user should be able to select only one option.
When user should be able to create new options on the fly.

#

Use sentence case for tab titles.

#

Name	Default	Description
`isDisabled`	—	`boolean` Determines if select is disabled.
`isLoading`	—	`boolean` Indicates that options are being loaded.
`isInvalid`	—	`boolean` Indicates that select is in invalid state.
`isClearable`	`false`	`boolean` Determines if selection can be cleared.
`isOptionDisabled`	—	`(option: Option) => boolean` Function to determine whether an option should be disabled.
`emptyOptionsMessage`	`"No options"`	`string` Text to show inside a dropdown when there are no options.
`options`	—	`Option[]` Available options. `Option` is a generic, so type of options will be inferred.
`optionLabel`	—	`(option: Option) => string` Function to extract label from an option. If it's not provided, `label` field will be used as a label.
`optionValue`	—	`(option: Option) => OptionValue` Function to extract value from an option. If it's not provided, `value` field will be used as a value.
`optionAccessory`	—	`(option: Option) => SelectOptionAccessoryType` Function to show an accessory view near the option label.
`placeholder`	—	`string` Placeholder text to show inside a select when nothing is selected.
`value`	—	`OptionValue[]` Selected options.
`width`	`"xs"`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "auto" \| "100%"` Select width.
`onChange`	—	`(value: OptionValue[]) => void` Callback for when user selects a different option or clears the selection.

#

Name	Default	Description
`isDisabled`	—	`boolean` Determines if select is disabled.
`isLoading`	—	`boolean` Indicates that options are being loaded.
`isInvalid`	—	`boolean` Indicates that select is in invalid state.
`isClearable`	`false`	`boolean` Determines if selection can be cleared.
`isOptionDisabled`	—	`(option: Option) => boolean` Function to determine whether an option should be disabled.
`emptyOptionsMessage`	`"No options"`	`string` Text to show inside a dropdown when there are no options.
`optionGroups`	—	`Array<{ label: string; options: Option[]; }>` Available options. `Option` is a generic, so type of options will be inferred.
`optionLabel`	—	`(option: Option) => string` Function to extract label from an option. If it's not provided, `label` field will be used as a label.
`optionValue`	—	`(option: Option) => OptionValue` Function to extract value from an option. If it's not provided, `value` field will be used as a value.
`optionAccessory`	—	`(option: Option) => SelectOptionAccessoryType` Function to show an accessory view near the option label.
`placeholder`	—	`string` Placeholder text to show inside a select when nothing is selected.
`value`	—	`OptionValue[]` Selected options.
`width`	`"xs"`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "auto" \| "100%"` Select width.
`onChange`	—	`(value: OptionValue[]) => void` Callback for when user selects a different option or clears the selection.

On this page

Usage

Disabled
Loading
Invalid
Clearable
Accessories
Custom objects
Groups
Guidelines
When to use
When not to use
Content
Props
MultiSelect
GroupedMultiSelect

hightouch

Multi Select

#Disabled

#Loading

#Invalid

#Clearable

#Accessories

#Custom objects

#Groups

#Guidelines

#When to use

#When not to use

#Content

#Props

#MultiSelect

#GroupedMultiSelect

#

#

#

#

#

#

#

#

#

#

#

#

#

#