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.

action

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

Type:func | { current?: { focusVisible: func } }

disabled

If true, the component is disabled.

Type:bool

Default:false

onChange

Callback invoked when new value is being set.

Type:func

slotProps

The props used for each slot inside the Tab.

Type:{ root?: func | object }

Default:{}

slots

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.

Type:{ root?: elementType }

Default:{}

value

You can provide your own value. Otherwise, it falls back to the child position index.

Type:number | string

The ref is forwarded to the root element.

Slots

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

root

The component that renders the root.

Class name: .base-Tab-root

Default component: 'button'

CSS classes

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

.base--disabledSTATE

State class applied to the root button element if disabled={true}.

.base--selectedSTATE

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.

children

The content of the component.

Type:node

slotProps

The props used for each slot inside the TabPanel.

Type:{ root?: func | object }

Default:{}

slots

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.

Type:{ root?: elementType }

Default:{}

value

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.

Type:number | string

The ref is forwarded to the root element.

Slots

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

root

The component that renders the root.

Class name: .base-TabPanel-root

Default component: 'div'

CSS classes

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

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

children

The content of the component.

Type:node

defaultValue

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

Type:number | string

direction

The direction of the text.

Type:'ltr' | 'rtl'

Default:'ltr'

onChange

Callback invoked when new value is being set.

Type:func

orientation

The component orientation (layout flow direction).

Type:'horizontal' | 'vertical'

Default:'horizontal'

selectionFollowsFocus

If true the selected tab changes on focus. Otherwise it only changes on activation.

Type:bool

slotProps

The props used for each slot inside the Tabs.

Type:{ root?: func | object }

Default:{}

slots

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.

Type:{ root?: elementType }

Default:{}

value

The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to null.

Type:number | string

The ref is forwarded to the root element.

Slots

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

root

The component that renders the root.

Class name: .base-Tabs-root

Default component: 'div'

CSS classes

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

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

children

The content of the component.

Type:node

slotProps

The props used for each slot inside the TabsList.

Type:{ root?: func | object }

Default:{}

slots

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.

Type:{ root?: elementType }

Default:{}

The ref is forwarded to the root element.

Slots

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

root

The component that renders the root.

Class name: .base-TabsList-root

Default component: 'div'

CSS classes

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

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