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.
<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
<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.
<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.
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
<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>
<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
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
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.
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' },
},
};