Tabs
Switch between related panels of content
Category: navigation · WCAG 2.2-AA · navigation, tabs, sections
States
- active
- inactive
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The initial value when uncontrolled. |
value | string | — | The controlled value. |
onValueChange | (value: string) => void | — | Called with the new value when it changes. |
Design tokens
--cascivo-color-accent--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-border--cascivo-focus-ring
When to use
- Switching between peer panels of related content in the same context
- Showing one section at a time when all sections are equally important
When not to use
- Stacked sequential content the user reads top to bottom — use Accordion
- Changing a setting or view parameter — use a SegmentedControl
- Navigating between pages — use links
How to build an accessible Tabs in React →
Examples
Basic
<Tabs defaultValue="account"><TabsList><TabsTrigger value="account">Account</TabsTrigger></TabsList><TabsContent value="account">…</TabsContent></Tabs>Related components
- Accordion — Accordion stacks sequential sections; Tabs switch between peers
- SegmentedControl — SegmentedControl changes a setting/parameter rather than swapping panels