Tabs
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Tabs component provides an accessible way to organize content into multiple panels. Built on Radix UI, it supports keyboard navigation, focus management, and customizable sizing. Perfect for settings panels, dashboards, content organization, and any interface requiring multiple views.
Basic Usage
Content for Tab 1
This is the content for the first tab.
Different Sizes
Small
Small tab content
Large
Large tab content
Settings Panel
Controlled Tabs
Overview Dashboard
Get a high-level view of your application metrics and performance.
Current active tab: overview
Properties
Tabs
| Property | Type | Description |
|---|---|---|
defaultValue | string | The default active tab value (uncontrolled). |
value | string | The active tab value (controlled). |
onValueChange | (value: string) => void | Callback fired when the active tab changes. |
orientation | "horizontal" | "vertical" | The orientation of the tabs. Default is "horizontal". |
dir | "ltr" | "rtl" | The reading direction of the tabs. |
activationMode | "automatic" | "manual" | Whether tabs are activated automatically on focus or manually. |
className | string | Additional CSS classes for the tabs container. |
children | ReactNode | The tabs content (TabsList and TabsContent). |
TabsList
| Property | Type | Description |
|---|---|---|
size | "sm" | "md" | "lg" | "xl" | The size of the tabs list. Default is "md". |
className | string | Additional CSS classes for the tabs list. |
children | ReactNode | The tab triggers (TabsTrigger components). |
TabsTrigger
| Property | Type | Description |
|---|---|---|
value | string | The unique value that associates the trigger with content. |
size | "sm" | "md" | "lg" | "xl" | The size of the tab trigger. Default is "md". |
disabled | boolean | Whether the tab trigger is disabled. |
className | string | Additional CSS classes for the tab trigger. |
children | ReactNode | The trigger content (usually text or icons). |
TabsContent
| Property | Type | Description |
|---|---|---|
value | string | The unique value that associates the content with a trigger. |
forceMount | boolean | Whether to force mount the content. |
className | string | Additional CSS classes for the tab content. |
children | ReactNode | The content to display when the tab is active. |
Accessibility
The Tabs component includes comprehensive accessibility features:
- Keyboard Navigation - Arrow keys navigate between tabs, Space/Enter activates tabs
- Focus Management - Proper focus handling and visual indicators
- ARIA Support - Full ARIA attributes for screen readers
- Role Semantics - Proper tablist, tab, and tabpanel roles
- Screen Reader Support - Tab states and content announced correctly
- Disabled State - Proper handling of disabled tabs
Common Use Cases
The Tabs component is perfect for:
- Settings Panels - Organize different configuration sections
- Dashboard Views - Switch between different data views
- Content Organization - Separate related content into logical groups
- Form Sections - Break long forms into manageable sections
- Navigation Menus - Create tabbed navigation interfaces
- Product Details - Show specifications, reviews, and related info
- User Profiles - Organize profile information into categories
Best Practices
- Clear Labels - Use descriptive and concise tab labels
- Logical Grouping - Group related content together
- Consistent Sizing - Use consistent tab sizes throughout your interface
- Default Selection - Always have a default active tab
- Loading States - Show loading indicators for async content
- Responsive Design - Consider mobile layouts and scrollable tabs
- Icon Usage - Use icons to enhance tab identification
- State Management - Use controlled tabs for complex state requirements