Skip to content
+

Tabs

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

useTab API

Import

import useTab from '@mui/base/useTab';
// or
import { useTab } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDescription
disabledboolean
If true, the tab will be disabled.
idstring
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.
onClickReact.MouseEventHandler
Callback fired when the tab is clicked.
rootRefReact.Ref<Element>
Ref to the root slot's DOM element.
valuenumber | 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.

Return value

NameTypeDescription
activeboolean
If true, the tab is active (as in :active pseudo-class; in other words, pressed).
focusVisibleboolean
If true, the tab has visible focus. This is a workaround for browsers that do not support this feature natively.
getRootProps<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabRootSlotProps<TOther>
Resolver for the root slot's props.
highlightedboolean
If true, the tab is highlighted.
indexnumber
0-based index of the tab in the list of tabs.
rootRefReact.RefCallback<Element> | null
Ref to the root slot's DOM element.
selectedboolean
If true, the tab is selected.
setFocusVisibleReact.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.
totalTabsCountnumber
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.


useTabPanel API

Import

import useTabPanel from '@mui/base/useTabPanel';
// or
import { useTabPanel } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDescription
idstring
The id of the TabPanel.
rootRefReact.Ref<HTMLElement>
The ref of the TabPanel.
valuenumber | string
The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.

Return value

NameTypeDescription
getRootProps() => UseTabPanelRootSlotProps
Resolver for the root slot's props.
hiddenboolean
If true, it indicates that the tab panel will be hidden.
rootRefReact.Ref<HTMLElement>


useTabs API

Import

import useTabs from '@mui/base/useTabs';
// or
import { useTabs } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription
defaultValuestring | 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).
selectionFollowsFocusboolean
If true the selected tab changes on focus. Otherwise it only changes on activation.
valuestring | number | null
The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.

Return value

NameTypeDescription
contextValueTabsProviderValue
Returns the values to be passed to the tabs provider.


useTabsList API

Import

import useTabsList from '@mui/base/useTabsList';
// or
import { useTabsList } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDescription
rootRef*React.Ref<Element>
Ref to the root element.

Return value

NameTypeDescription
contextValueTabsListProviderValue
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<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabsListRootSlotProps<TOther>
Resolver for the root slot's props.
highlightedValuestring | number | null
The value of the currently highlighted tab.
isRtlboolean
If true, it will indicate that the text's direction in right-to-left.
orientation'horizontal' | 'vertical'
The component orientation (layout flow direction).
rootRefReact.RefCallback<Element> | null
selectedValuestring | number | null
The value of the currently selected tab.