Overview

Tabs

Basic usage#

<Tabs>
  <Tab title="JavaScript">Content for JavaScript developers.</Tab>
  <Tab title="Python">Content for Python developers.</Tab>
</Tabs>

Persist selection with group#

Tabs that share a group id restore the last selected tab from localStorage:

<Tabs group="language">
  <Tab title="Node">Node instructions…</Tab>
  <Tab title="Go">Go instructions…</Tab>
</Tabs>

A single Tab child renders as plain content with no tab chrome.

Properties#

Tabs#

Name Type Description
group string Shared id for persisting the selected tab across tab sets.
children ReactNode One or more Tab children.

Tab#

Name Type Description
title ReactNode Tab label. Falls back to Tab 1, Tab 2, and so on.
children ReactNode Panel content.

Back to Components overview.

Updated

Was this page helpful?