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
version3.30.1
usageimport {useSelectState} from 'react-stately'

API#


useSelectState<T extends object>( (props: SelectStateOptions<T> )): SelectState<T>

Interface#


Properties

NameTypeDescription
isFocusedbooleanWhether the select is currently focused.
focusStrategyFocusStrategyControls which item will be auto focused when the menu opens.
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.
isOpenbooleanWhether the overlay is currently open.
realtimeValidationValidationResultRealtime validation results, updated as the user edits the value.
displayValidationValidationResultCurrently displayed validation results, updated when the user commits their changes.

Methods

MethodDescription
setFocused( (isFocused: boolean )): voidSets whether the select is focused.
open( (focusStrategy?: FocusStrategynull )): voidOpens the menu.
toggle( (focusStrategy?: FocusStrategynull )): voidToggles the menu.
setSelectedKey( (key: Keynull )): voidSets the selected key.
setOpen( (isOpen: boolean )): voidSets whether the overlay is open.
close(): voidCloses the overlay.
updateValidation( (result: ValidationResult )): voidUpdates the current validation result. Not displayed to the user until commitValidation is called.
resetValidation(): voidResets the displayed validation state to valid when the user resets the form.
commitValidation(): voidCommits the realtime validation so it is displayed to the user.

Example#


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