Tabs

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

Component demos Components API Hooks API

Tab API

Import

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

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.

Slot name	Class name	Default component	Description
root	.base-Tab-root	`'button'`	The component that renders the root.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--disabled	State class applied to the root `button` element if `disabled={true}`.
.base--selected	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';

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.

Slot name	Class name	Default component	Description
root	.base-TabPanel-root	`'div'`	The component that renders the root.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base-TabPanel-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';

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.

Slot name	Class name	Default component	Description
root	.base-Tabs-root	`'div'`	The component that renders the root.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base-Tabs-horizontal	Class name applied to the root element if `orientation='horizontal'`.
.base-Tabs-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';

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.

Slot name	Class name	Default component	Description
root	.base-TabsList-root	`'div'`	The component that renders the root.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base-TabsList-horizontal	Class name applied to the root element if `orientation='horizontal'`.
.base-TabsList-vertical	Class name applied to the root element if `orientation='vertical'`.