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. |