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.
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
The panels, as TabContent elements. Children that are not TabContent
elements with a non-empty title are ignored.
Optional controlled active tab index. When provided the parent owns the
selection; pair it with onTabChange.
Initial tab index for uncontrolled usage. Defaults to 0.
Called with the new index whenever a tab is selected, by click or keyboard.
Cherry theme object.
TabContent
The tab trigger label. Required and must be non-empty.
The panel content rendered while this tab is active.