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
Choose an option
Informative message holder
Single xLarge
Choose an option
Informative message holder

Error

Large
Choose an option
Informative message holder
xLarge
Choose an option
Informative message holder

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

NameTypeRequiredDefaultDescription
sizelarge | xLargeNolargeThe option's value.
labelJSX.Element | stringNo-Label title
placeholderSlotJSX.Element | stringNo-Placeholder
headerSlotJSX.ElementNo-Header element slot.
footerSlotJSX.ElementNo-Footer element slot.
menuWidthnumberNo_Options container width
leftSlotJSX.ElementNo_Left content for selected option
leftSlotJSX.ElementNo_Inform message under select
amountOfVisibleItemsnumberNo_Set amount of visible options in multi select, all other will be hide under counter
isErrorbooleanNo_Set valid/not valid select
isDisabledbooleanNo_Is the select disabled
isMultibooleanNo_Support multiple selected options
isSearchablebooleanNo_Whether to enable search functionality
closeMenuOnSelectbooleanNofalseClose the select menu when the user selects an option