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