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.
tsx
Copied
1
<Tabs defaultValue="overview">
2
  <Tabs.Tab value="overview" label="Overview">
3
    Overview content here
4
  </Tabs.Tab>
5
  <Tabs.Tab value="team" label="Team Detail">
6
    Team detail content here
7
  </Tabs.Tab>
8
  <Tabs.Tab value="user" label="User Detail">
9
    User detail content here
10
  </Tabs.Tab>
11
</Tabs>

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.
tsx
Copied
1
<Title order={4}>Tabs placement: bottom</Title>
2
<Tabs defaultValue="overview" placement="bottom">
3
  {tabs}
4
</Tabs>
5
<Title order={4}>Tabs placement: left</Title>
6
<Tabs defaultValue="overview" placement="left">
7
  {tabs}
8
</Tabs>
9
<Title order={4}>Tabs placement: right</Title>
10
<Tabs defaultValue="overview" placement="right">
11
  {tabs}
12
</Tabs>

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.
tsx
Copied
1
<Title order={4}>Tabs position: center</Title>
2
<Tabs defaultValue="overview" position="center">
3
  {tabs}
4
</Tabs>
5
<Title order={4}>Tabs position: end</Title>
6
<Tabs defaultValue="overview" position="end">
7
  {tabs}
8
</Tabs>
9
<Title order={4}>Tabs position: apart</Title>
10
<Tabs defaultValue="overview" position="apart">
11
  {tabs}
12
</Tabs>

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.
tsx
Copied
1
<Tabs defaultValue="overview" color="cyan">
2
  <Tabs.Tab value="overview" label="Overview" />
3
  <Tabs.Tab value="team" label="Team Detail" />
4
  <Tabs.Tab value="user" label="User Detail" />
5
</Tabs>
6
<Tabs defaultValue="overview" color="cyan">
7
  <Tabs.Tab value="overview" label="Overview" color="orange" />
8
  <Tabs.Tab value="team" label="Team Detail" />
9
  <Tabs.Tab value="user" label="User Detail" color="green" />
10
</Tabs>

Disabling
You can disable individual Tabs.Tab components using the disabled prop.
tsx
Copied
1
<Tabs defaultValue="overview">
2
  <Tabs.Tab value="overview" label="Overview">
3
    Overview content here
4
  </Tabs.Tab>
5
  <Tabs.Tab value="team" label="Team Detail" disabled>
6
    Team detail content here
7
  </Tabs.Tab>
8
  <Tabs.Tab value="user" label="User Detail">
9
    User detail content here
10
  </Tabs.Tab>
11
</Tabs>

Routing-aware tabs
You can save which tab is active in the URL by setting the routingKey prop. This is useful when you want to be able to share a link to a specific tab.
The routingKey specifies the URL query parameter that will be used to store the active tab. The routingKey will be used as the parameter name and the value of the active Tabs.Tab will be used as the parameter value.
In the following example, we set the routingKey to activeTab.
tsx
Copied
1
<Tabs routingKey="activeTab">
2
  <Tabs.Tab value="overview" label="Overview">
3
    Overview content here
4
  </Tabs.Tab>
5
  <Tabs.Tab value="team" label="Team Detail">
6
    Team detail content here
7
  </Tabs.Tab>
8
  <Tabs.Tab value="user" label="User Detail">
9
    User detail content here
10
  </Tabs.Tab>
11
</Tabs>
As a result, if we click on the "Team Detail" tab, the URL will be updated to https://app.airplane.dev/views/vew123?activeTab=team. You can share this URL with others to link them directly to the "Team Detail" tab.

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.
tsx
Copied
1
<div style={{ height: 200 }}>
2
  <Tabs defaultValue="overview" placement="left">
3
    <Tabs.Tab value="overview" label="Overview">
4
      {loremParagraphs.slice(0, 5).map((p) => (
5
        <Text key={p}>{p}</Text>
6
      ))}
7
    </Tabs.Tab>
8
    <Tabs.Tab value="team" label="Team Detail">
9
      {loremParagraphs.map((p) => (
10
        <Text key={p}>{p}</Text>
11
      ))}
12
    </Tabs.Tab>
13
    <Tabs.Tab value="user" label="User Detail">
14
      {loremParagraphs.slice(0, 2).map((p) => (
15
        <Text key={p}>{p}</Text>
16
      ))}
17
    </Tabs.Tab>
18
  </Tabs>
19
</div>

Unmounting
By default, all tab content will be mounted when the page loads and will remain mounted as you change tabs.
To change this behavior, set keepMounted={false}. This is useful when the tab content includes components that impact performance, e.g. calling slow tasks. Note that components that are rendered inside Tabs.Panel will reset their state on each mount (tab change).
In the following example, each tab is mounted when the tab is selected. The checkbox checked state is reset when the tab is unmounted.
tsx
Copied
1
<Tabs defaultValue="overview" keepMounted={false}>
2
  <Tabs.Tab value="overview" label="Overview">
3
    <Checkbox label="Overview" />
4
  </Tabs.Tab>
5
  <Tabs.Tab value="team" label="Team Detail">
6
    <Checkbox label="Team detail" />
7
  </Tabs.Tab>
8
  <Tabs.Tab value="user" label="User Detail">
9
    <Checkbox label="User detail" />
10
  </Tabs.Tab>
11
</Tabs>

Component API

Tabs
children
REQUIRED
React.ReactNode

Tab content. Expecting Tabs.Tab components.

color
optional
"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.

defaultValue
optional
Default
null
string

The tabs value on initial render.

enableRouting
optional
Default
true
boolean

If true, the tabs will save the active tab in the URL.

grow
optional
Default
false
boolean

Whether tabs should take the whole space. If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
id
optional
string

The ID referenced by the global component state.

keepMounted
optional
Default
true
boolean

If false, content of the tabs will not stay mounted when tab is inactive.

onTabChange
optional
(value: string) => void

Callback when the value of the active tab changes when using as a controlled component. Prefer using the global component state.

placement
optional
Default
top
"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.

position
optional
Default
start
"start" | "end" | "center" | "apart"

How tabs are positioned along the main axis.

routingKey
optional
Default
null
string

URL param key for saving the active tab in the URL.

Set to null to disable routing for this Tabs component.

value
optional
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
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

Tabs.Tab
children
optional
Component

Content of the tab panel.

color
optional
Color

Accent color of the tab. Will override the color from the Tabs parent component if set.

disabled
optional
boolean

If true, tab is disabled.

icon
optional
Component

Adds an icon to the left of the tab label.

label
optional
Component

Content of the label for the tab. Can be a string or a React component.

value
optional
string

Identifier for the tab. Used by Tabs parent component when determining the active tab.

State API
setValue
optional
(value: string) => void

Sets the active Tabs.Tab.

value
optional
string

The identifier of the currently active Tabs.Tab component.

PrivacyTermsSupport