Navigation
Tabs
Tabs that switch the view. Arrow keys move between tabs; Home and End jump to the ends.
ReactVueWeb Components
View in Storybook Playground
Examples
<Tabs label="Settings" items={[{ id: 'a', label: 'A', content: '…' }]} />Props
| Name | Type | Default | Description |
|---|---|---|---|
items required | TabItem[] | — | Tabs to render. |
variant | 'tabs' | 'pills' | tabs | Visual style. @default 'tabs' |
value | string | — | Controlled active tab id. |
defaultValue | string | — | Initial active tab id (uncontrolled). Defaults to the first tab. |
onChange | (id: string) => void | — | Called when the active tab changes. |
label | string | — | Accessible label for the tablist. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.