Tabs

The Tabs component allows you to switch between different content.

Basic usage

The Tabs components should wrap Tabs.Tab components that will define the value (identifier), label, and content of each tab.

Placement

The placement prop indicates where the tabs should be relative to the content. By default, the tabs will be oriented horizontally and placed above the content. You can set placement to bottom to have horizontal tabs below the content. For vertical tabs, you can set placement to left or right.

Position

The position prop will define where the tabs are positioned along the main axis. By default, the tabs be at the start of the main axis. You can also set position to center, end, or apart.

Color

You can alter the accent color of the all of the tabs using the color prop on the Tab component or for individual tabs using the color prop on each Tabs.Tab component. If both are set, the color on the Tabs.Tab component will take precedence.

Disabling

You can disable individual Tabs.Tab components using the disabled prop.

Fixed height vertical tabs

By default, vertical tabs will expand in height to fit the height of the content of each tab. If the content of each tab is a different height and you want to fix the height of the Tabs, set a height on the parent container of the Tabs. The content will scroll if it overflows the height.

Component API

Tabs

NameDescriptionDefault
id
string
The ID referenced by the global component state.
defaultValue
string
The tabs value on initial render.
color
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`
Accent color of the active tab.
placement
"left" | "right" | "top" | "bottom"
How list of tabs is placed relative to the content. If top or bottom, tabs will be oriented horizontally. If left or right, tabs will be oriented vertically.
top
position
"start" | "end" | "center" | "apart"
How tabs are positioned along the main axis.
start
grow
boolean
Whether tabs should take the whole space.
false
children
Component
Tab content. Expecting Tabs.Tab components.
keepMounted
boolean
If false, content of the tabs will not stay mounted when tab is inactive.
true
onTabChange
(value: string) => void
Callback when the value of the active tab changes when using as a controlled component. Prefer using the global component state.
value
string
Value of the active tab if using this component as a controlled component. Prefer to use the component state to get the value.
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.

Tabs.Tab

NameDescription
value
string
Identifier for the tab. Used by Tabs parent component when determining the active tab.
label
Component
Content of the label for the tab. Can be a string or a React component.
children
Component
Content of the tab panel.
disabled
boolean
If true, tab is disabled.
icon
Component
Adds an icon to the left of the tab label.
color
Color
Accent color of the tab. Will override the color from the Tabs parent component if set.

State API

NameDescription
value
string
The identifier of the currently active Tabs.Tab component.
setValue
(value: string) => void
Sets the active Tabs.Tab.