useSelectState

Provides state management for a select component. Handles building a collection of items from props, handles the open state for the popup menu, and manages multiple selection state.

installyarn add @react-stately/select
version3.1.6
usageimport {useSelectState} from '@react-stately/select'

API#


useSelectState<T>( (props: SelectProps<T> )): SelectState<T>

Interface#


Properties

NameTypeDescription
isFocusedbooleanWhether the select is currently focused.
selectedKeyKeyThe key for the currently selected item.
selectedItemNode<T>The value of the currently selected item.
collectionCollection<Node<T>>A collection of items in the list.
disabledKeysSet<Key>A set of items that are disabled.
selectionManagerSelectionManagerA selection manager to read and update multiple selection state.
focusStrategyFocusStrategyControls which item will be auto focused when the menu opens.
isOpenbooleanWhether the overlay is currently open.

Methods

MethodDescription
setFocused( (isFocused: boolean )): voidSets whether the select is focused.
setSelectedKey( (key: Key )): voidSets the selected key.
open( (focusStrategy?: FocusStrategynull )): voidOpens the menu.
toggle( (focusStrategy?: FocusStrategynull )): voidToggles the menu.
close(): voidCloses the overlay.

Example#


See the docs for useSelect in react-aria for an example of useSelectState.