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';
Parameters
Name | Type | Description |
---|---|---|
disabled | boolean | If true , the tab will be disabled. |
id | string | 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. |
onClick | React.MouseEventHandler | Callback fired when the tab is clicked. |
rootRef | React.Ref<Element> | Ref to the root slot's DOM element. |
value | number | 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
Name | Type | Description |
---|---|---|
active | boolean | If true , the tab is active (as in :active pseudo-class; in other words, pressed). |
focusVisible | boolean | If true , the tab has visible focus.
This is a workaround for browsers that do not support this feature natively. |
getRootProps | <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabRootSlotProps<TOther> | Resolver for the root slot's props. |
highlighted | boolean | If true , the tab is highlighted. |
index | number | 0-based index of the tab in the list of tabs. |
rootRef | React.RefCallback<Element> | null | Ref to the root slot's DOM element. |
selected | boolean | If true , the tab is selected. |
setFocusVisible | React.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. |
totalTabsCount | number | 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';
Parameters
Name | Type | Description |
---|---|---|
id | string | The id of the TabPanel. |
rootRef | React.Ref<HTMLElement> | The ref of the TabPanel. |
value | number | string | The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. |
Return value
Name | Type | Description |
---|---|---|
getRootProps | () => UseTabPanelRootSlotProps | Resolver for the root slot's props. |
hidden | boolean | If true , it indicates that the tab panel will be hidden. |
rootRef | React.Ref<HTMLElement> |
useTabs API
Import
import useTabs from '@mui/base/useTabs';
// or
import { useTabs } from '@mui/base';
Parameters
Name | Type | Default | Description |
---|---|---|---|
defaultValue | string | 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). |
selectionFollowsFocus | boolean | If true the selected tab changes on focus. Otherwise it only
changes on activation. | |
value | string | 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
Name | Type | Description |
---|---|---|
contextValue | TabsProviderValue | 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';
Parameters
Name | Type | Description |
---|---|---|
rootRef* | React.Ref<Element> | Ref to the root element. |
Return value
Name | Type | Description |
---|---|---|
contextValue | TabsListProviderValue | 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 | <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseTabsListRootSlotProps<TOther> | Resolver for the root slot's props. |
highlightedValue | string | number | null | The value of the currently highlighted tab. |
isRtl | boolean | If true , it will indicate that the text's direction in right-to-left. |
orientation | 'horizontal' | 'vertical' | The component orientation (layout flow direction). |
rootRef | React.RefCallback<Element> | null | |
selectedValue | string | number | null | The value of the currently selected tab. |