Tabs
Organize content into separate views. Built on Radix UI with smooth animations and full RTL support.
Preview
Make changes to your account here. Click save when you're done.
Installation
Usage
Examples
With Icons
Your profile information
Controlled
Active tab: account
Account tab content
Props
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | undefined | The default active tab value |
value | string | undefined | Controlled active tab value |
onValueChange | (value: string) => void | undefined | Callback when tab changes |
Accessibility
Keyboard Navigation
- Tab - Move focus to the active tab
- Arrow Keys - Navigate between tabs
- Home - Move to first tab
- End - Move to last tab
ARIA Attributes
- role="tablist" on the tabs list container
- role="tab" on each tab trigger
- role="tabpanel" on each tab content panel
- aria-selected indicates the active tab
- aria-controls links tab to its panel
RTL Considerations
Tabs automatically align and flow correctly in RTL layouts.
- Tab list layout respects text direction
- Arrow key navigation follows reading direction
- Focus indicators position correctly
- Icons in tabs mirror appropriately if needed