Multi Select
This Multi Select based on react-select library.
Unlike a normal select, multiselect allows the user to select multiple options at once.
As well as select Multi Select has two sizes with a different views: large (by default) and xLarge. Large size has label outside input, xLarge has label inside the input. Also, you can set multi-select view with counter. Just specify the amount of visible options inside select with the help of amountOfVisibleItems prop.
Size
Large
Choose an option
Single xLarge
Choose an option
With counter
Large
Choose an option
xLarge
Choose an option
Options Content
Large
Choose an option
xLarge
Choose an option
Hint message
Large
Informative message holderChoose an option
Single xLarge
Choose an option
Error
Large
Informative message holderChoose an option
xLarge
Choose an option
Disabled
Large
Choose an option
xLarge
Choose an option
Without label
Choose an option
Choose an option
List options width
Large
Choose an option
Single xLarge
Choose an option
Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
size | large | xLarge | No | large | The option's value. |
label | JSX.Element | string | No | - | Label title |
placeholderSlot | JSX.Element | string | No | - | Placeholder |
headerSlot | JSX.Element | No | - | Header element slot. |
footerSlot | JSX.Element | No | - | Footer element slot. |
menuWidth | number | No | _ | Options container width |
leftSlot | JSX.Element | No | _ | Left content for selected option |
leftSlot | JSX.Element | No | _ | Inform message under select |
amountOfVisibleItems | number | No | _ | Set amount of visible options in multi select, all other will be hide under counter |
isError | boolean | No | _ | Set valid/not valid select |
isDisabled | boolean | No | _ | Is the select disabled |
isMulti | boolean | No | _ | Support multiple selected options |
isSearchable | boolean | No | _ | Whether to enable search functionality |
closeMenuOnSelect | boolean | No | false | Close the select menu when the user selects an option |