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.96.0 |
Stable3.96.0View in LexiconCHANGELOG
Multi Select is an aggregate component of the @clayui/form package, consisting of a high-level written above a <ClayInput /> that provides the ability to create tags.
Composing
<ClayMultiSelect /> enables you to make compositions to achieve your expected results, as this component is distributed only in a low level component, this increases flexibility and you can create many possibilities but it comes with a price tag... you may want to get close to the Lexicon specifications and will have to compose with some of the other components to get there, let's detail it further below.
Autocomplete
Usually a MultiSelect has an autocomplete to help the user choose existing tags. You can use the sourceItems API to achieve this result.
Select Button
According to the Lexicon specification a Select button can be grouped with MultiSelect to allow tag data to come from elsewhere. You can achieve this result by composing with <ClayForm.Group />, <ClayInput.GroupItem /> and <ClayButton /> .
Validation
An input needs validation so you can add some composition props with <ClayInput /> and <ClayForm /> to get the result.
Custom Autocomplete
To customize Autocomplete content to stylize to your needs and also have filter control, you can use the menuRenderer API.
Sizes
The size property on ClayMultiSelect only modifies the size of the input.
Small
Render a smaller ClayMultiSelect input by setting the size property to sm.
ClayMultiSelect's with the Select Button should use the modifier class input-group-sm on input-group or form-group-sm on form-group.