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

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