Tabs
Switch between different views
Import
Source
Docs
Package
Usage
Controlled Tabs
To control Tabs state, use value
and onChange
props:
Uncontrolled Tabs
If you do not need to subscribe to Tabs state changes, use defaultValue
:
Change colors
To change colors of all tabs, set color
on Tabs
component, to change color of the individual tab,
set color
on Tabs.Tab
.
Tabs position
To display tab on the opposite side, set margin-left: auto
with ml="auto"
prop or with className
:
Inverted tabs
To make tabs inverted, place Tabs.Panel
components before Tabs.List
and add inverted
prop to Tabs
component:
Vertical tabs placement
To change placement of Tabs.List
in vertical orientation set placement
prop:
Custom variants
Example of custom variant with FloatingIndicator:
Disabled tabs
Set disabled
prop on Tabs.Tab
component to disable tab.
Disabled tab cannot be activated with mouse or keyboard, and they will be skipped when user navigates with arrow keys:
Activation mode
By default, tabs are activated when user presses arrows keys or Home/End keys.
To disable that set activateTabWithKeyboard={false}
on Tabs
component:
Tab deactivation
By default, active tab cannot be deactivated. To allow that set allowTabDeactivation
on Tabs
component:
Unmount inactive tabs
By default, inactive Tabs.Panel
will stay mounted, to unmount inactive tabs, set keepMounted={false}
on Tabs.
This is useful when you want to render components that impact performance inside Tabs.Panel
. Note that
components that are rendered inside Tabs.Panel
will reset their state on each mount (tab change).
Get tab control ref
Usage with react-router
Usage with Next.js router
Styles API
Tabs
supports Styles API, you can add styles to any inner element of the component withclassNames
prop. Follow Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
Example of Styles API usage to customize tab styles:
Accessibility
Tabs component follows WAI-ARIA recommendations on accessibility.
If you use Tabs.Tab
without text content, for example, only with icon, then set aria-label
or use VisuallyHidden component:
To set tabs list label, set aria-label
on Tabs.List
component, it will be announced by screen reader:
Keyboard interactions
Key | Description | Condition |
ArrowRight | Focuses and activates next tab that is not disabled | orientation="horizontal" |
ArrowLeft | Focuses and activates previous tab that is not disabled | orientation="horizontal" |
ArrowDown | Focuses and activates next tab that is not disabled | orientation="vertical" |
ArrowUp | Focuses and activates previous tab that is not disabled | orientation="vertical" |
Home | Focuses and activates first tab | – |
End | Focuses and activates last tab | – |