Tabs

Visual Hierarchy

Use the default variant for standard content switching within cards or panels. Choose variant="folder" when you need strong visual emphasis with bg-primary on the active tab. Use variant="underline" for lightweight, minimal tab bars that blend into content-heavy layouts.

Spacing & Layout

Tabs include a default gap-2 between the tab list and content. For full-width layouts, apply className="w-full" to both Tabs and TabsList, with flex-1 on each trigger. Keep the number of tabs between 3 and 7 for optimal scannability.

Responsive Behavior

On mobile, consider using full-width tabs so triggers span the viewport. For many tabs, wrap the tab list in a horizontal ScrollArea to prevent overflow. Icons help reduce label length on smaller screens. The underline variant works especially well on mobile due to its minimal chrome.

Color & Contrast

The default variant uses bg-muted for the list container and bg-background for the active trigger, providing subtle contrast. The folder variant leverages bg-primary with text-primary-foreground for high-contrast active states. Disabled triggers reduce opacity to 50% while maintaining readability.

Keyboard Navigation

• Tab -- Move focus into the tab list, then to the active tab panel content
• ArrowLeft / ArrowRight -- Navigate between tab triggers (horizontal orientation)
• ArrowUp / ArrowDown -- Navigate between tab triggers (vertical orientation)
• Home -- Move focus to the first tab trigger
• End -- Move focus to the last tab trigger
• Enter or Space -- Activate the focused tab (when activationMode="manual")

Screen Reader Support

• Built on Radix UI Tabs, which provides correct role="tablist", role="tab", and role="tabpanel" semantics
• Each trigger is automatically linked to its content via aria-controls and aria-labelledby
• Active tab is announced via aria-selected="true"
• Disabled state is communicated via disabled attribute on the trigger

Focus Management

Visible focus ring with focus-visible:ring-2 and ring-ring. In automatic activation mode, focus movement immediately activates the tab. In manual mode, focus and activation are separate, letting users review options before committing. Focus wraps cyclically through triggers.

Activation Modes

activationMode="automatic" (default) activates a tab as soon as it receives focus, following WAI-ARIA recommended behavior for fast switching. activationMode="manual" requires an explicit Enter or Space to activate, which is preferable when tab content is expensive to render.

ARIA Attributes

{/* Standard tabs with accessible labels */}
<Tabs defaultValue="account" aria-label="Account settings">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">...</TabsContent>
  <TabsContent value="password">...</TabsContent>
</Tabs>

{/* Controlled tabs with onValueChange */}
<Tabs
  value={activeTab}
  onValueChange={setActiveTab}
  aria-label="Dashboard navigation"
>
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="analytics">...</TabsContent>
</Tabs>

{/* Manual activation mode */}
<Tabs defaultValue="tab1" activationMode="manual">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">...</TabsContent>
  <TabsContent value="tab2">...</TabsContent>
</Tabs>