Tabs

The Tabs component groups related content into panels behind a horizontal list of triggers. Wrap each panel in a TabContent with a title; only the active panel is rendered.

Tabs follow the WAI-ARIA tabs pattern: the triggers form a tablist with roving tabindex, ArrowLeft and ArrowRight cycle through the tabs (wrapping at the edges), Home and End jump to the first and last tab, and moving focus also selects the tab.

For design guidelines and all interactive states, see the Tabs design page.

import React from "react";
import { Tabs, TabContent } from "cherry-styled-components";

export default function Page() {
  return (
    <Tabs>
      <TabContent title="Overview">Overview panel content.</TabContent>
      <TabContent title="Details">Details panel content.</TabContent>
      <TabContent title="Settings">Settings panel content.</TabContent>
    </Tabs>
  );
}

By default Tabs manage their own selection, starting at defaultActiveTab (index 0 if omitted). Pass activeTab to control the selection from the parent, paired with onTabChange:

const [tab, setTab] = useState(0);

<Tabs activeTab={tab} onTabChange={setTab}>
  <TabContent title="Overview">Overview panel content.</TabContent>
  <TabContent title="Details">Details panel content.</TabContent>
</Tabs>;

Properties

Tabs

childrenReact.ReactNode

The panels, typically TabContent elements. Any valid React element with a non-empty string title prop becomes a tab (the element type itself is not checked); children without one are ignored.

activeTabnumber

Optional controlled active tab index. When provided the parent owns the selection; pair it with onTabChange.

defaultActiveTabnumber

Initial tab index for uncontrolled usage. Defaults to 0.

onTabChange(index: number) => void

Called with the new index whenever a tab is selected, by click or keyboard.

All other standard div attributes (className, id, style, aria-*, and so on) are passed through to the root element; only the native onChange attribute is excluded.

TabContent

titlestringrequired

The tab trigger label. Required and must be non-empty.

childrenReact.ReactNode

The panel content rendered while this tab is active.

View Source