Tabs
An accessible tabbed interface for organizing content into separate views, with support for keyboard navigation and multiple visual styles.
Basic Example
Content for Tab 1
Variants
Default
Content for Tab 1
Pills
Content for Tab 1
Underline
Content for Tab 1
Sizes
Small
Content for Tab 1
Medium (Default)
Content for Tab 1
Large
Content for Tab 1
With Icons
Home content with quick overview and dashboard.
Full Width
Content for Tab 1
Vertical Orientation
General Settings
Configure general application preferences and behavior.
Controlled State
Current tab: tab1
Content for Tab 1
Disabled Tab
This tab is enabled
Props - TabsRoot
| Name | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled value of active tab |
defaultValue | string | - | Default active tab (uncontrolled) |
onValueChange | (value: string) => void | - | Callback when tab changes |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Tab list orientation |
Props - TabsList
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'pills' | 'underline' | 'default' | Visual style of tabs |
fullWidth | boolean | false | Whether tabs span full width |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Tab list orientation |
Props - TabsTrigger
| Name | Type | Default | Description |
|---|---|---|---|
value* | string | - | Unique value for this tab |
variant | 'default' | 'pills' | 'underline' | 'default' | Visual style of trigger |
size | 'sm' | 'md' | 'lg' | 'md' | Size of trigger |
disabled | boolean | false | Whether tab is disabled |
Props - Tabs (Convenience Wrapper)
| Name | Type | Default | Description |
|---|---|---|---|
items* | TabItem[] | - | Array of tab items |
variant | 'default' | 'pills' | 'underline' | 'default' | Visual style of tabs |
size | 'sm' | 'md' | 'lg' | 'md' | Size of tabs |
fullWidth | boolean | false | Whether tabs span full width |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Tab list orientation |
Usage Guidelines
When to use
- •To organize related content into separate views without leaving the page
- •When users need to switch between different categories of information frequently
- •For settings pages with multiple configuration sections
- •To reduce page scrolling by dividing content into logical groups
Best practices
- •Use clear, concise labels that describe the content of each tab
- •Keep the number of tabs reasonable (3-7 tabs is ideal)
- •Consider using vertical orientation for sidebar navigation with many tabs
- •Use icons with text to improve scannability for horizontal tabs
- •Disable tabs that are temporarily unavailable rather than hiding them
- •Use the underline variant for minimal, content-focused interfaces
Accessibility
- •Full keyboard navigation with Arrow keys (Left/Right for horizontal, Up/Down for vertical)
- •Home/End keys jump to first/last tab
- •Proper ARIA roles: tablist, tab, tabpanel
- •ARIA attributes: aria-selected, aria-controls, aria-labelledby
- •Roving tabindex ensures only active tab is in tab order
- •Disabled tabs are skipped during keyboard navigation
Do's and Don'ts
✓ Do
- •Use tabs for related content that users need to switch between frequently
- •Keep tab labels short and descriptive (1-2 words ideal)
- •Show disabled tabs with tooltips explaining why they're unavailable
- •Use consistent tab order that matches user mental models
- •Preserve tab content state when switching between tabs
Project overview
✗ Don't
- •Don't use tabs for sequential processes (use a wizard/stepper instead)
- •Don't use more than 7 horizontal tabs (consider vertical or navigation menu)
- •Don't nest tabs within tabs (creates confusing navigation)
- •Don't use tabs for unrelated content or actions
- •Don't clear form data when users switch tabs (preserve state)
Form step 1
Related Components
Accordion
For vertically stacked collapsible sections
Card
Container for grouped content
Navigation Menu
For site-wide navigation