Skip to content
+

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';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
actionfunc
| { current?: { focusVisible: func } }
-

A ref for imperative actions. It currently only supports focusVisible() action.

disabledboolfalse

If true, the component is disabled.

onChangefunc-

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.

valuenumber
| 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 nameClass nameDefault componentDescription
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 nameDescription
.base--disabledState class applied to the root button element if disabled={true}.
.base--selectedState 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.

NameTypeDefaultDescription
childrennode-

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.

valuenumber
| 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 nameClass nameDefault componentDescription
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 nameDescription
.base-TabPanel-hiddenState 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.

NameTypeDefaultDescription
childrennode-

The content of the component.

defaultValuenumber
| string
-

The default value. Use when the component is not controlled.

direction'ltr'
| 'rtl'
'ltr'

The direction of the text.

onChangefunc-

Callback invoked when new value is being set.

orientation'horizontal'
| 'vertical'
'horizontal'

The component orientation (layout flow direction).

selectionFollowsFocusbool-

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.

valuenumber
| 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 nameClass nameDefault componentDescription
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 nameDescription
.base-Tabs-horizontalClass name applied to the root element if orientation='horizontal'.
.base-Tabs-verticalClass 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.

NameTypeDefaultDescription
childrennode-

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 nameClass nameDefault componentDescription
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 nameDescription
.base-TabsList-horizontalClass name applied to the root element if orientation='horizontal'.
.base-TabsList-verticalClass name applied to the root element if orientation='vertical'.