Tabs

A high-quality, unstyled React tabs component for toggling between related panels on the same page.

A component for toggling between related panels on the same page.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Tabs } from '@base-ui/react/tabs';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel />
</Tabs.Root>;

API reference

Root

Name	Type	Default	Description
`value`Optional	`TabsTab.Value \| undefined`	—	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
`defaultValue`Optional	`TabsTab.Value \| undefined`	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`orientation`Optional	`TabsRoot.Orientation \| undefined`	`horizontal`	The component orientation (layout flow direction).

List

Name	Type	Default	Description
`activateOnFocus`Optional	`boolean \| undefined`	`false`	Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
`loopFocus`Optional	`boolean \| undefined`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.

Tab

Name	Type	Default	Description
`value`Required	`TabsTab.Value`	—	The value of the Tab.
`disabled`Optional	`boolean \| undefined`	—	Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.

Indicator

Name	Type	Default	Description
`renderBeforeHydration`Optional	`boolean \| undefined`	`false`	Whether to render itself before React hydrates. This minimizes the time that the indicator isn't visible after server-side rendering.

Panel

Name	Type	Default	Description
`value`Required	`TabsTab.Value`	—	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
`keepMounted`Optional	`boolean \| undefined`	`false`	Whether to keep the HTML element in the DOM while the panel is hidden.

Tabs

Anatomy

API reference

Root

List

Tab

Indicator

Panel

On this page