Tabs

Navigation

ARIA tablist with automatic (default) or manual activation, roving tabIndex and disabled-tab awareness. Panels stay mounted (hidden) so scroll position and form state survive tab switches.

import { Tabs } from "@componentforge/react";

Examples

Automatic activation with disabled tab

Panels stay mounted (hidden), so scroll position and form state survive switching.

Accessibility

tablist/tab/tabpanel roles wired with aria-controls and aria-labelledby id pairs.
Roving tabindex: selected tab owns Tab-stop; arrows move focus, Home/End jump ends, disabled tabs are skipped.
Manual mode defers activation until Enter/Space while still moving focus.

Keyboard interactions

Key	Action
`← / → (or ↑ / ↓)`	Move between tabs; activates immediately in automatic mode.
`Home / End`	First / last enabled tab.
`Enter / Space`	Activate in manual mode.

API reference

Selected props — every component also spreads native HTML attributes.

Prop	Type	Default	Description
value / defaultValue / onValueChange	string	—	Selection contract.
activation	"automatic" \| "manual"	"automatic"	Activation policy.
Tab.disabled	boolean	false	Excluded from arrow traversal.