Tabs
Tabbed interface with keyboard navigation. Compound component with TabList, Tab, and TabPanel.
Example
Overview content here.
Features content here.
Pricing content here.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | string | — | No | Controlled active tab value |
defaultValue | string | — | No | Initial active tab (uncontrolled) |
onChange | (value: string) => void | — | No | Called when active tab changes |
orientation | 'horizontal' | 'vertical' | 'horizontal' | No | Tab layout direction |
Accessibility
- role="tablist", role="tab", role="tabpanel"
- aria-selected on active tab
- Arrow key navigation between tabs
- Tab panels linked via aria-labelledby
Related Tokens
--tabs-surface--tabs-on-surface--tabs-border--tabs-indicator