Tabs
A set of layered sections of content that are displayed one at a time.
Usage
import { Tabs } from "@rhinolabs/ui"
export default function TabsDemo() {
return (
<Tabs defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
Account settings content
</Tabs.Content>
<Tabs.Content value="password">
Password settings content
</Tabs.Content>
</Tabs>
)
}
Examples
Basic Tabs
Simple tabbed interface.
<Tabs defaultValue="music">
<Tabs.List>
<Tabs.Trigger value="music">Music</Tabs.Trigger>
<Tabs.Trigger value="podcasts">Podcasts</Tabs.Trigger>
<Tabs.Trigger value="audiobooks">Audiobooks</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="music">
<p className="text-sm text-muted-foreground">
Listen to your favorite music tracks and albums.
</p>
</Tabs.Content>
<Tabs.Content value="podcasts">
<p className="text-sm text-muted-foreground">
Catch up on the latest podcast episodes.
</p>
</Tabs.Content>
<Tabs.Content value="audiobooks">
<p className="text-sm text-muted-foreground">
Explore our collection of audiobooks.
</p>
</Tabs.Content>
</Tabs>
With Forms
Tabs containing form elements.
<Tabs defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="preferences">Preferences</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
<div className="space-y-4">
<div>
<label>Name</label>
<input type="text" />
</div>
<div>
<label>Email</label>
<input type="email" />
</div>
</div>
</Tabs.Content>
<Tabs.Content value="preferences">
<div className="space-y-4">
<div>
<label>Language</label>
<select>
<option>English</option>
<option>Spanish</option>
</select>
</div>
<div>
<label>Theme</label>
<select>
<option>Light</option>
<option>Dark</option>
</select>
</div>
</div>
</Tabs.Content>
</Tabs>
Props
Tabs
Prop | Type | Description |
---|---|---|
defaultValue | string | The initial active tab |
value | string | The controlled value |
onValueChange | (value: string) => void | Value change handler |
TabsTrigger
Prop | Type | Description |
---|---|---|
value | string | The value of the tab |
disabled | boolean | Whether the tab is disabled |
Design Considerations
- Use clear tab labels
- Maintain consistent content
- Consider mobile layouts
- Show active states clearly
- Handle loading states
Accessibility
- Supports keyboard navigation
- Maintains focus management
- Provides ARIA labels
- Handles tab roles
- Announces selection changes
Last updated on