Tabs

The Tabs component organizes content into multiple sections, allowing users to switch between them. Only one tab panel is visible at a time, making it ideal for organizing related content without overwhelming the interface.

Tabs use automatic activation by default—the tab activates on focus. Set activationMode="manual" to require click/Enter.

Features

Horizontal and vertical orientations
Automatic and manual activation modes
Keyboard navigation with arrow keys
Controlled and uncontrolled modes
Loop navigation support
Roving focus for accessibility

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@loke/design-system/tabs';

export default function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account settings content here.
      </TabsContent>
      <TabsContent value="password">
        Password settings content here.
      </TabsContent>
    </Tabs>
  );
}

Tips:

Use defaultValue to set the initially active tab.
Each TabsTrigger and TabsContent must have matching value props.
Use forceMount on TabsContent if you need to keep content mounted.

Props

Tabs

Prop

Type

TabsList

Prop

Type

TabsTrigger

Prop

Type

TabsContent

Prop

Type

Examples

Basic tabs

Account

Make changes to your account here. Click save when you're done.

Name

Username

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Manage your account settings.</CardDescription>
      </CardHeader>
      <CardContent>
        {/* Form fields */}
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>Change your password here.</CardDescription>
      </CardHeader>
      <CardContent>
        {/* Form fields */}
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>

Controlled tabs

Account Settings

Manage your account settings and preferences.

Current tab: account

const [value, setValue] = useState("account");

<Tabs value={value} onValueChange={setValue}>
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content</TabsContent>
  <TabsContent value="password">Password content</TabsContent>
</Tabs>
<p>Current tab: {value}</p>

Vertical tabs

General Settings

Configure your general application preferences here.

<Tabs defaultValue="general" orientation="vertical">
  <TabsList className="flex-col h-auto">
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="general">General settings</TabsContent>
  <TabsContent value="security">Security settings</TabsContent>
  <TabsContent value="notifications">Notification preferences</TabsContent>
</Tabs>

With disabled tabs

Active Tab

This tab is active and accessible.

<Tabs defaultValue="active">
  <TabsList>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="active">Active tab content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Accessibility

Uses role="tablist" for the tab container.
Uses role="tab" for triggers and role="tabpanel" for content.
Arrow keys navigate between tabs.
aria-selected indicates the active tab.
Tab panels are labeled by their corresponding triggers.
Disabled tabs are skipped in keyboard navigation.
Enter/Space activates tabs in manual mode.

Best practices

Use clear, concise labels for tabs.
Keep the number of tabs manageable (3-5 is ideal).
Ensure each tab represents distinct, related content.
Consider using icons alongside text for visual clarity.
Avoid nesting tabs within tabs.
Use vertical orientation for sidebars or narrow spaces.
Set a default value to avoid showing empty state.

Tabs

Account

Account Settings

General Settings

Active Tab

On this page