Skip to main content

MultiSelect

The MultiSelect component allows for multiple options to be selected from a dropdown list. These options are collected as visual tags. The MultiSelect component can be searchable or non-searchable.

Uncontrolled​

By default, MultiSelect is an uncontrolled component. The defaultSelectedKeys prop can be used to set the initial selected key.

Result
Loading...
Live Editor
<MultiSelect label="MultiSelect" defaultSelectedKeys={['one', 'three']}>
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</MultiSelect>

With sections​

Result
Loading...
Live Editor
<MultiSelect label="MultiSelect with Sections">
	<Section key="header-1" title="Fruit">
		<Item key="apples">Apples</Item>
		<Item key="bananas">Bananas</Item>
		<Item key="oranges">Oranges</Item>
	</Section>
	<Section key="header-2" title="Vegetables">
		<Item key="beans">Beans</Item>
		<Item key="cabbages">Cabbages</Item>
		<Item key="onions">Onions</Item>
	</Section>
	<Section key="header-3" title="Cheese">
		<Item key="cheddar">Cheddar</Item>
		<Item key="mozzarella">Mozzarella</Item>
		<Item key="swiss">Swiss</Item>
	</Section>
</MultiSelect>

Searchable​

The searchable prop allows the user to search for items in the list. If the value is not found in the list the input value will be cleared on field blur.

Result
Loading...
Live Editor
<MultiSelect label="Searchable MultiSelect" searchable>
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</MultiSelect>

Controlled​

Controlled components are useful when responding to changes to the selected keys. For example, to update the selected key based on user input, use the onSelectionChange prop to update the selected key.

Result
Loading...
Live Editor
function Example() {
	const [selectedKeys, setSelectedKeys] = useState(['one', 'three']);

	return (
		<MultiSelect
			label="MultiSelect"
			searchable
			selectedKeys={selectedKeys}
			onSelectionChange={setSelectedKeys}
		>
			<Item key="one">One</Item>
			<Item key="two">Two</Item>
			<Item key="three">Three</Item>
			<Item key="four">Four</Item>
		</MultiSelect>
	);
}

With dividers​

Result
Loading...
Live Editor
<MultiSelect label="MultiSelect with Dividers">
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Dropdown.Divider />
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</MultiSelect>
Result
Loading...
Live Editor
<MultiSelect label="MultiSelect with Sections">
	<Section key="header-1" title="Fruit">
		<Item key="apples">Apples</Item>
		<Item key="bananas">Bananas</Item>
		<Item key="oranges">Oranges</Item>
	</Section>
	<Dropdown.Divider />
	<Section key="header-2" title="Vegetables">
		<Item key="beans">Beans</Item>
		<Item key="cabbages">Cabbages</Item>
		<Item key="onions">Onions</Item>
	</Section>
	<Dropdown.Divider />
	<Section key="header-3" title="Cheese">
		<Item key="cheddar">Cheddar</Item>
		<Item key="mozzarella">Mozzarella</Item>
		<Item key="swiss">Swiss</Item>
	</Section>
</MultiSelect>

With portal​

The container prop can be used to render the menu within a specific DOM element with a portal. This is useful when you want to render the menu outside of the current component tree, particularly if your MultiSelect is within a scrollable area and is getting clipped.

Result
Loading...
Live Editor
function Example() {
	return (
		<>
			<MultiSelect label="MultiSelect" container={() => document.querySelector('#container')}>
				<Item key="one">One</Item>
				<Item key="two">Two</Item>
				<Item key="three">Three</Item>
				<Item key="four">Four</Item>
			</MultiSelect>
			<div id="container" />
		</>
	);
}

Analytics​

The MultiSelect component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'MultiSelect',
	actions: {
		onSelectionChange: { type: 'MULTISELECT_CHANGE', payload: 'Change' },
	},
};

Props​