Tabs

Tabs organize groups of related content and let users navigate between them.

useTab API

import { useTab } from '@base_ui/react/Tabs';

Name	Type	Description
disabled	boolean	If `true`, the tab will be disabled.
id	string	The id of the tab. If not provided, it will be automatically generated.
onClick	React.MouseEventHandler	Callback fired when the tab is clicked.
rootRef	React.Ref<Element>	Ref to the root slot's DOM element.
value	any	The value of the tab. It's used to associate the tab with a tab panel(s) with the same value. If the value is not provided, it falls back to the position index.

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	Resolver for the root slot's props.
index	number	0-based index of the tab in the list of tabs.
orientation	TabsOrientation
rootRef	React.RefCallback<Element> \| null	Ref to the root slot's DOM element.
selected	boolean	If `true`, the tab is selected.
totalTabsCount	number	Total number of tabs in the nearest parent TabsList. This can be used to determine if the tab is the last one to style it accordingly.

import { useTabIndicator } from '@base_ui/react/Tabs';

This hook does not accept any input parameters.

Name	Type	Description
activeTabPosition	ActiveTabPosition \| null
direction	TabsDirection
getRootProps	(otherProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>
orientation	TabsOrientation
tabActivationDirection	TabActivationDirection

import { useTabPanel } from '@base_ui/react/Tabs';

Name	Type	Description
id	string	The id of the TabPanel.
rootRef	React.Ref<HTMLElement>	The ref of the TabPanel.
value	any	The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.

Name	Type	Description
direction	TabsDirection
getRootProps	(externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>	Resolver for the root slot's props.
hidden	boolean	If `true`, it indicates that the tab panel will be hidden.
orientation	TabsOrientation
rootRef	React.RefCallback<HTMLElement> \| null
tabActivationDirection	TabActivationDirection

import { useTabsList } from '@base_ui/react/Tabs';

Name	Type	Description
activateOnFocus*	boolean	If `true`, the tab will be activated whenever it is focused. Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
loop*	boolean	If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
rootRef*	React.Ref<Element>	Ref to the root element.

Name	Type	Description
contextValue	TabsListProviderValue	The value to be passed to the TabListProvider above all the tabs.
direction	TabsDirection	If `true`, it will indicate that the text's direction in right-to-left.
dispatch	(action: ListAction<any>) => void	Action dispatcher for the tabs list component. Allows to programmatically control the tabs list.
getRootProps	(externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>	Resolver for the root slot's props.
highlightedValue	any \| null	The value of the currently highlighted tab.
orientation	TabsOrientation	The component orientation (layout flow direction).
rootRef	React.RefCallback<Element> \| null
selectedValue	any \| null	The value of the currently selected tab.
tabActivationDirection	TabActivationDirection

import { useTabsRoot } from '@base_ui/react/Tabs';

This hook does not accept any input parameters.

Name	Type	Description