Multi Select

Multi select is the field type that allows writing text to create “tags” that are represented in the shape of labels.

install	yarn add @clayui/multi-select
version	3.124.0

Stable 3.124.0 View in Lexicon CHANGELOG

MultiSelect

Property	Description
`active` `boolean`	Flag to indicate if menu is showing or not.
`allowsCustomLabel` `boolean`	Whether MultiSelect allows an input value not corresponding to an item to be added. The default value is true
`alignmentByViewport`Deprecated `boolean`	Flag to align the Autocomplete within the viewport. @deprecated since v3.95.2 - it is no longer necessary...
`clearAllTitle` `string`	Title for the `Clear All` button. The default value is 'Clear All'
`closeButtonAriaLabel` `string`	Aria label for the Close button of the labels. The default value is 'Remove {0}'
`defaultActive` `boolean`	The initial value of the active state (uncontrolled). The default value is false
`defaultValue` `string`	Property to set the default value (uncontrolled). The default value is ''
`defaultItems` `Array<T>`	Set the default value of label items (uncontrolled). The default value is []
`direction` `'bottom' \| 'top'`	Direction the menu will render relative to the Autocomplete.
`menuRenderer`Deprecated `(props: IMenuRendererProps) => JSX.Element`	Adds a component to replace the default component that renders the content of the component. @deprecated since v3.95.2
`disabled` `boolean`	Flag that indicates to disable all features of the component.
`disabledClearAll` `boolean`	Flag to disabled Clear All functionality.
`hotkeysDescription`Deprecated `string`	Defines the description of hotkeys for the component, use this to handle internationalization. @deprecated since v3.96.1 - use `messages` instead.
`inputName` `string`	Value used for each selected item's hidden input name attribute
`inputValue`Deprecated `string`	Value of input * @deprecated since v3.49.0 - use `value` instead.
`isLoading`Deprecated `boolean`	Flag to indicate if loading icon should be rendered @deprecated since v3.95.2 - use `loadingState` instead.
`isValid` `boolean`	Flag to indicate if input is valid or not The default value is true
`items` `Array<T>`	Values that display as label items (controlled).
`liveRegion`Deprecated `{ added: string; removed: string; }`	The off-screen live region informs screen reader users the result of removing or adding a label. @deprecated since v3.96.1 - use `messages` instead.
`locator` `Locator`	Sets the name of the field to map the value/label of the item The default value is { id: 'key', label: 'label', value: 'value', }
`messages` `{ listCount?: string; listCountPlural?: string; loading: string; notFound: string; // Defines the description of hotkeys for the component, use this // to handle internationalization. hotkeys: string; // The off-screen live region informs screen reader users the result of // removing or adding a label. labelAdded: string; labelRemoved: string; }`	Messages for autocomplete. The default value is { hotkeys: 'Press backspace to delete the current row.', labelAdded: 'Label {0} added to the list', labelRemoved: 'Label {0} removed to the list', listCount: '{0} option available.', listCountPlural: '{0} options available.', loading: 'Loading...', notFound: 'No results found', }
`onActiveChange` `InternalDispatch<boolean>`	Callback for when the active state changes (controlled).
`onClearAllButtonClick` `() => void`	Callback for when the clear all button is clicked
`onChange` `InternalDispatch<string>`	Callback for when the input value changes (controlled).
`onItemsChange` `InternalDispatch<Array<T>>`	Callback for when items are added or removed (controlled).
`onLoadMore` `() => Promise<any> \| null`	Callback is called when more items need to be loaded when the scroll reaches the bottom.
`size` `null \| 'sm'`	Determines the size of the Multi Select component.
`sourceItems` `Array<T> \| null`	List of pre-populated items that will show up in a dropdown menu The default value is null
`spritemap` `string`	Path to spritemap for clay icons
`value` `string`	The value property sets the current value (controlled).
`loadingState` `number`	The current state of Autocomplete current loading. Determines whether the loading indicator should be shown or not.

MultiSelect.ItemNEW

Property	Description
`children` `React.ReactNode`	The item content.
`innerRef` `React.Ref<HTMLAnchorElement>`
`match` `string`	Match is the string that will be compared with value.
`value`Deprecated `string`	Value is the string that will be compared to the characters of the match property. @deprecated since v3.74.0 - use `children` instead.
`textValue` `string`	Sets a text value if the component's content is not plain text. This value is used in the combobox element to show the selected option.