Tabs

v0.1.0
Draft

Tabs show one panel at a time, chosen from a row of tabs that the arrow keys move along, built on Radix Tabs with Material Design 3 styling.

pnpm add @behivetech/atoms.tabs

You are viewing Tabs v0.1.0, snapshotted 2026-11-09. The latest is v0.1.1. Go to the latest →

Tabs show one panel at a time, chosen from a row of tabs that the arrow keys move along, built on Radix Tabs with Material Design 3 styling.

Usage

1import { Tab, TabList, TabPanel, Tabs } from "@behivetech/atoms.tabs";
2

3<Tabs defaultValue="one">
4  <TabList aria-label="Sections">
5    <Tab value="one">One</Tab>
6    <Tab value="two">Two</Tab>
7  </TabList>
8  <TabPanel value="one">First</TabPanel>
9  <TabPanel value="two">Second</TabPanel>
10</Tabs>;

The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.

Examples

Open all 1 →
Basic Tabs
1const BasicTabs = () => (
2  <Tabs defaultValue="choose">
3    <TabList aria-label="Add an image">
4      <Tab value="choose">Choose</Tab>
5      <Tab value="upload">Upload</Tab>
6    </TabList>
7    <TabPanel value="choose">Pick an image from the library.</TabPanel>
8    <TabPanel value="upload">Upload a new image.</TabPanel>
9  </Tabs>
10);
11

12render(<BasicTabs />);

Properties

Tabs props

PropTypeDefaultDescription
asChildboolean——
classNamestring—Additional class names to merge with the component root element
defaultValuestringThe tab selected first when uncontrolled
onValueChange((value: string) => void)—Called with the value of the tab the user selected
valuestring—The selected tab's value when controlled

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

TabPanel props

PropTypeDefaultDescription
value*string—The `value` of the `Tab` that shows this panel
asChildboolean——
classNamestring—Additional class names to merge with the component root element

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Tab props

PropTypeDefaultDescription
value*string—Identifies the tab and the `TabPanel` it shows
asChildboolean——
classNamestring—Additional class names to merge with the component root element

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

TabList props

PropTypeDefaultDescription
asChildboolean——
classNamestring—Additional class names to merge with the component root element

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Hooks

useSelectedTab hook

The value of the selected tab, read by `Tab` to set its `--selected` modifier.

useSelectedTab(): string | undefined

Returns string | undefined