Tabs

Tabs are UI elements for organizing and navigating between groups of related content.

useTab API

import { useTab } from '@mui/base/useTab';
// or
import { useTab } from '@mui/base';

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.
onChange	(event: React.SyntheticEvent, value: number \| string) => void	If `true`, the tab will be disabled.
onClick	React.MouseEventHandler	Callback fired when the tab is clicked.
rootRef	React.Ref<Element>	Ref to the root slot's DOM element.
value	number \| string	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
active	boolean	If `true`, the tab is active (as in `:active` pseudo-class; in other words, pressed).
focusVisible	boolean	If `true`, the tab has visible focus. This is a workaround for browsers that do not support this feature natively.
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabRootSlotProps<ExternalProps>	Resolver for the root slot's props.
highlighted	boolean	If `true`, the tab is highlighted.
index	number	0-based index of the tab in the list of tabs.
rootRef	React.RefCallback<Element> \| null	Ref to the root slot's DOM element.
selected	boolean	If `true`, the tab is selected.
setFocusVisible	React.Dispatch<React.SetStateAction<boolean>>	Sets the focus-visible state of the tab. This is a workaround for browsers that do not support this feature natively.
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 { useTabPanel } from '@mui/base/useTabPanel';
// or
import { useTabPanel } from '@mui/base';

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

Name	Type	Description
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabPanelRootSlotProps<ExternalProps>	Resolver for the root slot's props.
hidden	boolean	If `true`, it indicates that the tab panel will be hidden.
rootRef	React.Ref<HTMLElement>

import { useTabs } from '@mui/base/useTabs';
// or
import { useTabs } from '@mui/base';

Name	Type	Default	Description
defaultValue	string \| number \| null		The default value. Use when the component is not controlled.
direction	'ltr' \| 'rtl'	'ltr'	The direction of the text.
onChange	(event: React.SyntheticEvent \| null, value: number \| string \| null) => void		Callback invoked when new value is being set.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation (layout flow direction).
selectionFollowsFocus	boolean		If `true` the selected tab changes on focus. Otherwise it only changes on activation.
value	string \| number \| null		The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this prop to `false`.

Name	Type	Default	Description
contextValue	TabsProviderValue		Returns the values to be passed to the tabs provider.

import { useTabsList } from '@mui/base/useTabsList';
// or
import { useTabsList } from '@mui/base';

Name	Type	Default	Description
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.
dispatch	(action: ListAction<string \| number>) => void	Action dispatcher for the tabs list component. Allows to programmatically control the tabs list.
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabsListRootSlotProps<ExternalProps>	Resolver for the root slot's props.
highlightedValue	string \| number \| null	The value of the currently highlighted tab.
isRtl	boolean	If `true`, it will indicate that the text's direction in right-to-left.
orientation	'horizontal' \| 'vertical'	The component orientation (layout flow direction).
rootRef	React.RefCallback<Element> \| null
selectedValue	string \| number \| null	The value of the currently selected tab.