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>

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.

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

Component

Content of the tab panel.

color

Color

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

disabled

boolean

If true, tab is disabled.

icon

Component

Adds an icon to the left of the tab label.

label

Component

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

value

string

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

State API

setValue

(value: string) => void

Sets the active Tabs.Tab.

value

string

The identifier of the currently active Tabs.Tab component.

On this page

Basic usage Placement Position Color Disabling Routing-aware tabs Fixed height vertical tabs Unmounting Component API Tabs Tabs.Tab State API

Privacy Terms Support