Tabs

Tabs split one screen's content into peer views the reader moves between without leaving the page — Overview, Settings, Billing for a single project. For moving between different destinations, use navigation, not tabs.

Each Tab and its TabPanel are matched by a shared id.

Overview

Settings

Billing

Overview content

<Tabs>
<TabList>
  <Tab id="overview">Overview</Tab>
  <Tab id="settings">Settings</Tab>
  <Tab id="billing">Billing</Tab>
</TabList>
<TabPanels>
  <TabPanel id="overview">Overview content</TabPanel>
  <TabPanel id="settings">Settings content</TabPanel>
  <TabPanel id="billing">Billing content</TabPanel>
</TabPanels>
</Tabs>

Panels slide in the direction of travel, so keep the tab order matched to how the views relate.

When to use

Use Tabs to split one object's content into peer views the reader moves between in place.

Use something else when:

The views are different destinations. Use navigation links.
The options filter one list instead of swapping panels. Use Segment.
The reader must complete each view in order. Use a sequence of steps.
The sections stack down the page and the reader may open several or none. Use Disclosure.

Usage

Keep every tab about the same object. Tabs promise the context stays fixed while the view changes.

Don't

Hide a required step behind a tab. If the reader must complete each view in turn, use a sequence, not tabs they can skip.

Props

Prop	Type	Default
`children` The children of the component. A function may be provided to alter the children based on	Type`ChildrenOrFunction<TabsRenderProps>`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<TabsRenderProps>`	Default—
`defaultSelectedKey` The initial selected keys in the collection (uncontrolled).	Type`Key`	Default—
`disabledKeys` The item keys that are disabled. These items cannot be selected, focused, or otherwise	Type`Iterable<Key>`	Default—
`isDisabled` Whether the TabList is disabled.	Type`boolean`	Default—
`keyboardActivation` Whether tabs are activated automatically on focus or manually.	Type`"automatic" \| "manual"`	Default`'automatic'`
`orientation` The orientation of the tabs.	Type`"horizontal" \| "vertical"`	Default`'horizontal'`
`selectedKey` The currently selected key in the collection (controlled).	Type`Key`	Default—

TabList

Prop	Type	Default
`children` The contents of the collection.	Type`ReactNode \| ((item: T) => ReactNode)`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<TabsRenderProps>`	Default—
`dependencies` Values that should invalidate the item cache when using dynamic collections.	Type`readonly any[]`	Default—
`items` Item objects in the collection.	Type`Iterable<T>`	Default—

Tab

Prop	Type	Default
`children` The children of the component. A function may be provided to alter the children based on	Type`ChildrenOrFunction<TabsRenderProps>`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<TabsRenderProps>`	Default—
`href` A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).	Type`string`	Default—
`id` The unique id of the tab.	Type`Key`	Default—
`isDisabled` Whether the tab is disabled.	Type`boolean`	Default—
`rel` The relationship between the linked resource and the current page. See	Type`string`	Default—
`target` The target window for the link. See	Type`HTMLAttributeAnchorTarget`	Default—

TabPanels

Prop	Type	Default
`children` The contents of the collection.	Type`ReactNode \| ((item: T) => ReactNode)`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<TabsRenderProps>`	Default—
`dependencies` Values that should invalidate the item cache when using dynamic collections.	Type`readonly any[]`	Default—
`items` Item objects in the collection.	Type`Iterable<T>`	Default—

TabPanel

Prop	Type	Default
`children` The children of the component. A function may be provided to alter the children based on	Type`ChildrenOrFunction<TabsRenderProps>`	Default—
`className` The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the	Type`ClassNameOrFunction<TabsRenderProps>`	Default—
`id` The unique id of the tab.	Type`Key`	Default—
`shouldForceMount` Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab	Type`boolean`	Default`false`

Accessibility

Tabs wraps React Aria's Tabs, so the list is a tablist navigated with the arrow keys and each panel is linked to its tab. Selection follows focus and the active panel is the only one in the tab order.

When the reader prefers reduced motion, the panel slide and the height change between panels are skipped, and a tab's colour change is instant when it is reached with the keyboard.