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>

<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>

<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>

<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> ); }

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>
    );
}

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