Tabs

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

Tabs.tsx

Import

import { Tabs } from 'tenet-ui';

Usage guidelines

When to use: switching between peer views of the same context without navigating away (an entity’s Overview / Issues / Settings). For navigation between pages use links; for a small either/or use a SegmentedControl.

Rules

• Compose Tabs.List (give it an aria-label) with Tabs.Tabs, and one Tabs.Panel per tab value. Tab value must match its Panel value.
• Control it with value + onChange, or leave uncontrolled with defaultValue.
• Keep tab labels short (one or two words). Don’t overflow a dozen tabs — that’s navigation, not tabs.
• Keyboard and ARIA are handled: arrows move (selection follows focus), Home/End jump, roles + aria-controls/aria-labelledby are wired. Don’t rebuild this with buttons that toggle display:none divs.

Do / Don’t

• ✅ <Tabs defaultValue="overview"><Tabs.List aria-label="Sections">…</Tabs.List><Tabs.Panel value="overview">…</Tabs.Panel></Tabs>
• ❌ <button onClick> + conditionally rendered divs with no roles/keyboard.
• ❌ Tabs as primary site navigation.

Examples

1 story for Tabs, open in Storybook

• Default components-tabs--default

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Tabs

Prop	Type	Default	Description
value	string	None	Controlled active tab value.
defaultValue	string	None	Uncontrolled initial active tab value.
onChange	(value: string) => void	None	Called when the active tab changes.
children	ReactNode	None
className	string	None

Tabs.List

Prop	Type	Default	Description
aria-label	string	None	Accessible name for the tablist.
children	ReactNode	None

Tabs.Tab

Prop	Type	Default	Description
value *	string	None	Value this tab selects — must match a Tabs.Panel value.
disabled	boolean	false	Disable this tab.
children	ReactNode	None

* required

Tabs.Panel

Prop	Type	Default	Description
value *	string	None	Value this panel is shown for.
children	ReactNode	None

* required

Related components

• SegmentedControl
• Accordion
• Breadcrumbs