Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Preview

Title

Lorem ipsum dolor sit amet consectetur. Amet venenatis id nec facilisi faucibus vivamus.

Label

Label

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Item</TabsTrigger>
    <TabsTrigger value="tab2">Item</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <Input label="Label" placeholder="Input" />
    <Input label="Label" placeholder="Input" />
    <Button>Confirm</Button>
  </TabsContent>
  <TabsContent value="tab2">
    <p>Second tab content</p>
  </TabsContent>
</Tabs>

Multiple Tabs

Account Settings

Manage your account details and preferences.

Display Name

Email

Disabled Tab

Active Tab

This tab is active and interactive.

<Tabs defaultValue="active">
  <TabsList>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
    <TabsTrigger value="other">Other</TabsTrigger>
  </TabsList>
  <TabsContent value="active">
    <p>Active tab content</p>
  </TabsContent>
</Tabs>

API Reference

Prop	Type	Default	Description
defaultValue	string	—	The value of the tab to activate by default
value	string	—	Controlled active tab value
onValueChange	(value: string) => void	—	Callback when the active tab changes

TabsTrigger

Prop	Type	Default	Description
value	string	—	A unique value for the tab
disabled	boolean	false	Whether the tab trigger is disabled

TabsContent

Prop	Type	Default	Description
value	string	—	The value that associates content with a trigger

Accessibility

• Uses WAI-ARIA Tabs pattern with role="tablist", role="tab", and role="tabpanel"
• Supports keyboard navigation (Arrow keys to move between tabs, Enter/Space to activate)
• Automatic aria-selected state management
• Focus management follows roving tabindex pattern
• Each tab panel is associated with its trigger via aria-controls and aria-labelledby