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
RTL Support Example
The Tabs component automatically adapts to RTL layouts. Tab order and arrow key navigation follow the reading direction.
LTR (English)
View your account overview and summary information.
RTL (العربية)
View your account overview and summary information.
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
The Tabs component is fully RTL-compatible. Arrow key navigation automatically adapts to the current text direction.
- Tab list layout respects text direction
- Arrow key navigation follows reading direction
- Focus indicators position correctly
- Icons in tabs mirror appropriately if needed