Tabs

v0.1.1 (latest)
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

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

Open in new tab

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 TabsOpen in new tab

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