Tabs
The Tabs component provides you with tab navigation and sections.
Live Examples
Live Example
☀️
Copy
View Code
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@jarllyng/nostromo'
export default function TabsExample() {
return (
<Tabs defaultValue="account" className="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">...
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@jarllyng/nostromo";
// or
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@jarllyng/nostromo/tabs";Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@jarllyng/nostromo";
export default function Example() {
return (
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">
<p>Account settings</p>
</TabsContent>
<TabsContent value="password">
<p>Password settings</p>
</TabsContent>
</Tabs>
);
}Accessibility
Keyboard Navigation
- Arrow Keys: Navigate between tabs
- Tab: Moves focus to tab content
- Enter/Space: Activates the focused tab
- Home/End: Moves to first/last tab
ARIA Attributes
- role=“tablist”: Identifies the tab container
- role=“tab”: Identifies individual tabs
- role=“tabpanel”: Identifies tab content
- aria-selected: Indicates the active tab
- aria-controls: Links tabs to their content panels
Focus Management
- Roving tabindex: Only one tab is focusable at a time
- Focus indicators: Clear visual focus states
- Focus restoration: Maintains focus when switching tabs
Screen Reader Support
- Tab announcements: Active tab is announced
- Content changes: Tab content changes are announced
- Navigation hints: Keyboard navigation is described
Examples
// Accessible tabs with proper labeling
<Tabs defaultValue="account" className="w-[400px]">
<TabsList aria-label="Account settings">
<TabsTrigger value="account" aria-controls="account-panel">
Account
</TabsTrigger>
<TabsTrigger value="password" aria-controls="password-panel">
Password
</TabsTrigger>
</TabsList>
<TabsContent value="account" id="account-panel" role="tabpanel">
<p>Account content here.</p>
</TabsContent>
<TabsContent value="password" id="password-panel" role="tabpanel">
<p>Password content here.</p>
</TabsContent>
</Tabs>Props
Tabs
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
defaultValue | string | undefined | No | Default active tab value (uncontrolled) |
value | string | undefined | No | Active tab value (controlled) |
onValueChange | (value: string) => void | undefined | No | Callback when active tab changes |
orientation | "horizontal" | "vertical" | "horizontal" | No | Tab orientation |
dir | "ltr" | "rtl" | "ltr" | No | Text direction |
className | string | undefined | No | Additional CSS classes |
children | React.ReactNode | undefined | No | Tab content (TabsList, TabsContent) |
TabsList
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "default" | "pills" | "underline" | "default" | No | Visual variant |
size | "sm" | "default" | "lg" | "default" | No | Size of tabs |
className | string | undefined | No | Additional CSS classes |
children | React.ReactNode | undefined | No | Tab triggers |
TabsTrigger
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
value | string | - | Yes | Unique value for this tab |
disabled | boolean | false | No | Whether the tab is disabled |
className | string | undefined | No | Additional CSS classes |
children | React.ReactNode | undefined | No | Tab label content |
asChild | boolean | false | No | Render as child element |
TabsContent
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
value | string | - | Yes | Value matching the corresponding TabsTrigger |
forceMount | boolean | false | No | Force mount content even when inactive |
className | string | undefined | No | Additional CSS classes |
children | React.ReactNode | undefined | No | Tab panel content |
Last updated on