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

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

If true, the tab will be disabled.

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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
rootRef*React.Ref<Element>-

Ref to the root element.

Return value

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