Tabs

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { Tabs } from 'tenet-ui';

Source: src/components/Tabs/Tabs.tsx

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	—	Controlled active tab value.
defaultValue	string	—	Uncontrolled initial active tab value.
onChange	(value: string) => void	—	Called when the active tab changes.
children	ReactNode	—
className	string	—

Tabs.List

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

Tabs.Tab

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

* required

Tabs.Panel

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

* required

Related components

• SegmentedControl
• Accordion
• Breadcrumbs