Skip to Content

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

PropTypeDescription
defaultValuestringThe initial active tab
valuestringThe controlled value
onValueChange(value: string) => voidValue change handler

TabsTrigger

PropTypeDescription
valuestringThe value of the tab
disabledbooleanWhether 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