useTabListState

Provides state management for a Tabs component. Tabs include a TabList which tracks which tab is currently selected and displays the content associated with that Tab in a TabPanel.

installyarn add react-stately
version3.32.2
usageimport {useTabListState} from 'react-stately'

API#


useTabListState<T extends object>( (props: TabListStateOptions<T> )): TabListState<T>

Interface#


Properties

NameTypeDescription
isDisabledbooleanWhether the tab list is disabled.
selectedKeyKeynullThe key for the currently selected item.
selectedItemNode<T>nullThe 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.

Methods

MethodDescription
setSelectedKey( (key: Keynull )): voidSets the selected key.

Example#


See the docs for useTabList in react-aria for an example of useTabListState.