Tabs

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

Tab API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
action	func \| { current?: { focusVisible: func } }		A ref for imperative actions. It currently only supports `focusVisible()` action.
disabled	bool	false	If `true`, the component is disabled.
onChange	func		Callback invoked when new value is being set.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the Tab.
slots	{ root?: elementType }	{}	The components used for each slot inside the Tab. Either a string to use a HTML element or a component. See Slots API below for more details.
value	number \| string		You can provide your own value. Otherwise, it falls back to the child position index.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiTab-root	'button'	The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.Mui-disabled STATE	State class applied to the root `button` element if `disabled={true}`.
.Mui-selected STATE	State class applied to the root `button` element if `selected={true}`.

TabPanel API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children	node		The content of the component.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the TabPanel.
slots	{ root?: elementType }	{}	The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See Slots API below for more details.
value	number \| string		The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiTabPanel-root	'div'	The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.MuiTabPanel-hidden	State class applied to the root `div` element if `hidden={true}`.

Tabs API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children	node		The content of the component.
defaultValue	number \| string		The default value. Use when the component is not controlled.
direction	'ltr' \| 'rtl'	'ltr'	The direction of the text.
onChange	func		Callback invoked when new value is being set.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation (layout flow direction).
selectionFollowsFocus	bool		If `true` the selected tab changes on focus. Otherwise it only changes on activation.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the Tabs.
slots	{ root?: elementType }	{}	The components used for each slot inside the Tabs. Either a string to use a HTML element or a component. See Slots API below for more details.
value	number \| string		The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this prop to `null`.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiTabs-root	'div'	The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.MuiTabs-horizontal	Class name applied to the root element if `orientation='horizontal'`.
.MuiTabs-vertical	Class name applied to the root element if `orientation='vertical'`.

TabsList API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children	node		The content of the component.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the TabsList.
slots	{ root?: elementType }	{}	The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiTabsList-root	'div'	The component that renders the root.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.MuiTabsList-horizontal	Class name applied to the root element if `orientation='horizontal'`.
.MuiTabsList-vertical	Class name applied to the root element if `orientation='vertical'`.