Skip to content
+

Tabs

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

useTab API

Import

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

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

Parameters

NameTypeDescription
disabledboolean

If true, the tab will be disabled.

idstring

The id of the tab. If not provided, it will be automatically generated.

onChange(event: React.SyntheticEvent, value: number | string) => void

Callback invoked when new value is being set.

onClickReact.MouseEventHandler

Callback fired when the tab is clicked.

rootRefReact.Ref<Element>

Ref to the root slot's DOM element.

valuenumber | string

The value of the tab. It's used to associate the tab with a tab panel(s) with the same value. If the value is not provided, it falls back to the position index.

Return value

NameTypeDescription
activeboolean

If true, the tab is active (as in :active pseudo-class; in other words, pressed).

focusVisibleboolean

If true, the tab has visible focus. This is a workaround for browsers that do not support this feature natively.

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabRootSlotProps<ExternalProps>

Resolver for the root slot's props.

highlightedboolean

If true, the tab is highlighted.

indexnumber

0-based index of the tab in the list of tabs.

rootRefReact.RefCallback<Element> | null

Ref to the root slot's DOM element.

selectedboolean

If true, the tab is selected.

setFocusVisibleReact.Dispatch<React.SetStateAction<boolean>>

Sets the focus-visible state of the tab. This is a workaround for browsers that do not support this feature natively.

totalTabsCountnumber

Total number of tabs in the nearest parent TabsList. This can be used to determine if the tab is the last one to style it accordingly.


useTabPanel API

Import

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

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

Parameters

NameTypeDescription
idstring

The id of the TabPanel.

rootRefReact.Ref<HTMLElement>

The ref of the TabPanel.

valuenumber | string

The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.

Return value

NameTypeDescription
getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabPanelRootSlotProps<ExternalProps>

Resolver for the root slot's props.

hiddenboolean

If true, it indicates that the tab panel will be hidden.

rootRefReact.Ref<HTMLElement>

useTabs API

Import

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

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

Parameters

NameTypeDefaultDescription
defaultValuestring | number | null-

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

direction'ltr' | 'rtl''ltr'

The direction of the text.

onChange(event: React.SyntheticEvent | null, value: number | string | null) => void-

Callback invoked when new value is being set.

orientation'horizontal' | 'vertical''horizontal'

The component orientation (layout flow direction).

selectionFollowsFocusboolean-

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

valuestring | number | null-

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

Return value

NameTypeDescription
contextValueTabsProviderValue

Returns the values to be passed to the tabs provider.


useTabsList API

Import

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

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

Parameters

NameTypeDescription
rootRef*React.Ref<Element>

Ref to the root element.

Return value

NameTypeDescription
contextValueTabsListProviderValue

The value to be passed to the TabListProvider above all the tabs.

dispatch(action: ListAction<string | number>) => void

Action dispatcher for the tabs list component. Allows to programmatically control the tabs list.

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseTabsListRootSlotProps<ExternalProps>

Resolver for the root slot's props.

highlightedValuestring | number | null

The value of the currently highlighted tab.

isRtlboolean

If true, it will indicate that the text's direction in right-to-left.

orientation'horizontal' | 'vertical'

The component orientation (layout flow direction).

rootRefReact.RefCallback<Element> | null
selectedValuestring | number | null

The value of the currently selected tab.