Tabs

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

Component demos Components API Hooks API

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

disabled

If true, the tab will be disabled.

Type:boolean

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

Type:string

onChange

If true, the tab will be disabled.

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

onClick

Callback fired when the tab is clicked.

Type:React.MouseEventHandler

rootRef

Ref to the root slot's DOM element.

Type:React.Ref<Element>

value

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.

Type:number | string

Return value

active

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

Type:boolean

focusVisible

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

Type:boolean

getRootProps

Resolver for the root slot's props.

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

highlighted

If true, the tab is highlighted.

Type:boolean

index

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

Type:number

rootRef

Ref to the root slot's DOM element.

Type:React.RefCallback<Element> | null

selected

If true, the tab is selected.

Type:boolean

setFocusVisible

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

Type:React.Dispatch<React.SetStateAction<boolean>>

totalTabsCount

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.

Type:number

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

The id of the TabPanel.

Type:string

rootRef

The ref of the TabPanel.

Type:React.Ref<HTMLElement>

value

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

Type:number | string

Return value

getRootProps

Resolver for the root slot's props.

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

hidden

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

Type:boolean

rootRef

Type:React.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

defaultValue

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

Type:string | number | null

direction

The direction of the text.

Type:'ltr' | 'rtl'

Default:'ltr'

onChange

Callback invoked when new value is being set.

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

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:boolean

value

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

Type:string | number | null

Return value

contextValue

Returns the values to be passed to the tabs provider.

Type:TabsProviderValue

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

rootRefRequired

Ref to the root element.

Type:React.Ref<Element>

Return value

contextValue

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

Type:TabsListProviderValue

dispatch

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

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

getRootProps

Resolver for the root slot's props.

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

highlightedValue

The value of the currently highlighted tab.

Type:string | number | null

isRtl

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

Type:boolean

orientation

The component orientation (layout flow direction).

Type:'horizontal' | 'vertical'

rootRef

Type:React.RefCallback<Element> | null

selectedValue

The value of the currently selected tab.

Type:string | number | null