Select

The Select component allows for a single option to be selected from a dropdown list. The Select component can be searchable or non-searchable.

Uncontrolled

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

Result

Loading...

Live Editor

<Select label="Select" defaultSelectedKey="two"> <Item key="one">One</Item> <Item key="two">Two</Item> <Item key="three">Three</Item> <Item key="four">Four</Item> </Select>

<Select label="Select" defaultSelectedKey="two">
    <Item key="one">One</Item>
    <Item key="two">Two</Item>
    <Item key="three">Three</Item>
    <Item key="four">Four</Item>
</Select>

With sections

Result

Loading...

Live Editor

<Select label="Select 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> </Select>

<Select label="Select 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>
</Select>

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

<Select label="Searchable Select" searchable> <Item key="one">One</Item> <Item key="two">Two</Item> <Item key="three">Three</Item> <Item key="four">Four</Item> </Select>

<Select label="Searchable Select" searchable>
    <Item key="one">One</Item>
    <Item key="two">Two</Item>
    <Item key="three">Three</Item>
    <Item key="four">Four</Item>
</Select>

Controlled

Controlled components are useful when you need to respond to changes in the selected key. For example, if you need to update the selected key based on user input, you can use the onSelectionChange prop to update the selected key.

Result

Loading...

Live Editor

function Example() { const [selectedKey, setSelectedKey] = useState('one'); return ( <Select label="Select" searchable selectedKey={selectedKey} onSelectionChange={setSelectedKey} > <Item key="one">One</Item> <Item key="two">Two</Item> <Item key="three">Three</Item> <Item key="four">Four</Item> </Select> ); }

function Example() {
    const [selectedKey, setSelectedKey] = useState('one');

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

Analytics

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

export default {
	value: 'Select',
	actions: {
		onSelectionChange: { type: 'SELECT_SELECTION_CHANGE', payload: 'Change' },
		onChange: { type: 'SELECT_CHANGE', payload: 'Change' },
	},
};

Props