useComboBoxState

Provides state management for a combo box component. Handles building a collection of items from props and manages the option selection state of the combo box. In addition, it tracks the input value, focus state, and other properties of the combo box.

installyarn add react-stately
version3.17.0
usageimport {useComboBoxState} from 'react-stately'

API#


useComboBoxState<T extends object>( (props: ComboBoxStateOptions<T> )): ComboBoxState<T>

Interface#


Properties

NameTypeDescription
inputValuestringThe current value of the combo box input.
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
setInputValue( (value: string )): voidSets the value of the combo box input.
commit(): voidSelects the currently focused item and updates the input value.
open( (focusStrategy?: FocusStrategynull, , trigger?: MenuTriggerAction )): voidOpens the menu.
toggle( (focusStrategy?: FocusStrategynull, , trigger?: MenuTriggerAction )): voidToggles the menu.
revert(): voidResets the input value to the previously selected item's text if any and closes the menu.
setFocused( (isFocused: boolean )): voidSets whether the select is focused.
setSelectedKey( (key: Key )): voidSets the selected key.
setOpen( (isOpen: boolean )): voidSets whether the overlay is open.
close(): voidCloses the overlay.

Example#


See the docs for useComboBox in react-aria for an example of useComboBoxState.