Tabs
Usage
Controlled Tabs
To control Tabs state provide value
and onTabChange
props:
Uncontrolled Tabs
If you do not need to subscribe to Tabs state changes use defaultValue
:
Icon and right section
You can use any React node as icon
and rightSection
in Tabs.Tab
component:
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
.
color
should be a key of theme.colors
:
Tabs position
To display tab on the opposite side, set margin-left to auto with ml="auto"
prop:
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:
Disabled tabs
Set disabled
prop on Tabs.Tab
component to disable tab.
Disabled tab cannot be activated with mouse or keyboard, will be skipped when user navigates with arrow keys:
Activation mode
By default, tabs are activated when user presses arrows and Home/End keys.
To disable that set activateTabWithKeyboard={false}
on Tabs
component,
then user will be able to deactivate active tab by clicking on it:
Tab deactivation
By default, active 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).
Unstyled Tabs
Set unstyled
prop on Tabs component to remove all non-essential library styles.
By doing so, you will be able to keep component behavior while providing your own styles with Styles API:
Get tab control ref
Usage with react-router
Usage with Next.js router
Accessibility
Tabs component follows WAI-ARIA recommendations on accessibility.
Notes
If you use Tabs.Tab
without text content, for example, only with icon, then set aria-label
:
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 | – |
Tabs component props
Name | Type | Description |
---|---|---|
activateTabWithKeyboard | boolean | Determines whether tab should be activated with arrow key press, defaults to true |
allowTabDeactivation | boolean | Determines whether tab can be deactivated, defaults to false |
children * | ReactNode | Tabs content |
color | MantineColor | Key of theme.colors |
defaultValue | string | Default value for uncontrolled component |
id | string | Base id, used to generate ids that connect labels with controls, by default generated randomly |
inverted | boolean | Determines whether tabs should have inverted styles |
keepMounted | boolean | If set to false, Tabs.Panel content will not stay mounted when tab is not active |
loop | boolean | Determines whether arrow key presses should loop though items (first to last and last to first) |
onTabChange | (value: string) => void | Callback for controlled component |
orientation | "horizontal" | "vertical" | Tabs orientation, vertical or horizontal |
placement | "left" | "right" | Tabs.List placement relative to Tabs.Panel, applicable only for orientation="vertical", left by default |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Tabs border-radius from theme.radius or number ti set value from theme, defaults to theme.defaultRadius |
value | string | Value for controlled component |
variant | "outline" | "default" | "pills" | Controls component visuals |
Tabs.Tab component props
Name | Type | Description |
---|---|---|
children | ReactNode | Tab label |
color | MantineColor | Key of theme.colors |
icon | ReactNode | Section of content displayed before label |
rightSection | ReactNode | Section of content displayed after label |
value * | string | Value that is used to connect Tab with associated panel |
Tabs.List component props
Name | Type | Description |
---|---|---|
children * | ReactNode | <Tabs.Tab /> components |
grow | boolean | Determines whether tabs should take the whole space |
position | "left" | "right" | "center" | "apart" | Tabs alignment |
Tabs.Panel component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Panel content |
value * | string | Value of associated control |
Tabs component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Tabs-root | Root element |
tabsList | .mantine-Tabs-tabsList | Controls list (Tabs.List component) |
tab | .mantine-Tabs-tab | Tab control (Tabs.Tab component) |
tabRightSection | .mantine-Tabs-tabRightSection | Tab control right section |
tabLabel | .mantine-Tabs-tabLabel | Tab control label |
tabIcon | .mantine-Tabs-tabIcon | Tab control icon |
panel | .mantine-Tabs-panel | Tab panel (Tabs.Panel component) |