Tabs

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

Tab API

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

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.

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

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.

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

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.

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

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.