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

With empty/null items

react-aria does not explicitly support empty/null items. However, Kyber provides a NULLABLE_ITEM_KEY constant that can be used to set the key of an item you want to resolve to null. This is useful when you want to allow the user to select an empty value. In this case the selected key will be set to null when the empty item is selected. The following examples use a unicode non-breaking space character as the empty item. But any content can be used.

Non-searchable

Result

Loading...

Live Editor

function Example() { const [selectedKey, setSelectedKey] = useState('one'); return ( <Select label="Select" selectedKey={selectedKey} onSelectionChange={setSelectedKey}> <Item key={NULLABLE_ITEM_KEY}>{'\u00A0'}</Item> <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" selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
            <Item key={NULLABLE_ITEM_KEY}>{'\u00A0'}</Item>
            <Item key="one">One</Item>
            <Item key="two">Two</Item>
            <Item key="three">Three</Item>
            <Item key="four">Four</Item>
        </Select>
    );
}

Searchable

Result

Loading...

Live Editor

function Example() { const [selectedKey, setSelectedKey] = useState('one'); return ( <Select label="Select" searchable selectedKey={selectedKey} onSelectionChange={setSelectedKey}> <Item key={NULLABLE_ITEM_KEY}>{'\u00A0'}</Item> <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={NULLABLE_ITEM_KEY}>{'\u00A0'}</Item>
            <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