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
Name | Description | Default |
---|---|---|
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
Name | Description |
---|---|
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
Name | Description |
---|---|
value | string The identifier of the currently active Tabs.Tab component. |
setValue | (value: string) => void Sets the active Tabs.Tab. |