Skip to main content

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>

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>

As a serchable Select​

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>

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

With dividers​

Result
Loading...
Live Editor
<Select label="Select with Dividers">
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Dropdown.Divider />
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</Select>
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>
	<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>
</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>
	);
}

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

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 Select is within a scrollable area and is getting clipped.

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

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​