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	Default	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	Default	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	Default	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	Default	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	Default	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.