Multi Select

Multi select component to select multiple values from options.

Usage

Example Code

1import { MultiSelect, MultiSelectItem } from "inc-design-system/multiselect";

Example Code

1<MultiSelect items={data} />

Prop	Type	Description	Default
items	MultiSelectItem[]	Array of items to be displayed in the multi-select.	-
selectedItems	MultiSelectItem[]	Array of initially selected items.	-
placeholderText	string	Placeholder text displayed when no items are selected.	"Select items..."
notFoundText	string	Text displayed when no items match the search criteria.	-
tagVariant	"default" \| "primary" \| "secondary" \| "transparentBackground"	Variant for the tag displayed for selected items.	-
tagClassName	string	Additional class name for the tag component.	-
width	React.CSSProperties['width']	Width of the multi-select.	"512px"
inputHeight	React.CSSProperties['height']	Height of the input field.	"40px"
dropdownMaxHeight	React.CSSProperties['height']	Maximum height of the dropdown.	"384px"
inputScrollable	boolean	Whether the input field should be scrollable.	false
maxSelectedItems	number	Maximum number of items that can be selected.	Number.MAX_SAFE_INTEGER
hidePlaceholderWhenSelected	boolean	Whether to hide the placeholder when items are selected.	false
disabled	boolean	Whether the multi-select is disabled.	false
defaultOpen	boolean	Whether the dropdown should be open by default.	false
onMaxSelected	(maxLimit: number) => void	Callback when the maximum number of items is reached.	-
onSelectItem	(item: MultiSelectItem) => void	Callback when an item is selected.	-
onUnselectItem	(item: MultiSelectItem) => void	Callback when an item is unselected.	-
onOpen	(open: boolean) => void	Callback when the dropdown is opened or closed.	-