Tabs

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

Preview Code
AccountPassword
Interactive

Features

  • Full keyboard navigation.
  • Supports horizontal/vertical orientation.
  • Supports automatic/manual activation modes.
  • Can be controlled or uncontrolled.
  • Supports Right to Left direction.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c tabs

Anatomy

Import all parts and piece them together.

Typescript
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent
} from '@/ui/tabs';
Html
<Tabs>
  <TabsList>
    <TabsTrigger />
    <TabsTrigger />
  </TabsList>
  <TabsContent />
  <TabsContent />
</Tabs>

API Reference

Root

Contains all the tabs component parts.

PropTypeDefault
value string —
The controlled value of the tab to activate. Use with (valueChange).
defaultValue string —
The value of the tab that should be active when initially rendered. Use when you do not need to control the state.
orientation 'horizontal' | 'vertical' 'horizontal'
The orientation of the component.
activationMode 'automatic' | 'manual' 'automatic'
When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-orientation]"horizontal" | "vertical"

List

Contains the triggers that are aligned along the edge of the active content.

PropTypeDefault
loop boolean true
When true, keyboard navigation will loop from last tab to first, and vice versa.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-orientation]"horizontal" | "vertical"

Trigger

The button that activates its associated content.

PropTypeDefault
value *string —
A unique value that associates the trigger with a content.
disabled boolean false
When true, prevents the user from interacting with the tab.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"active" | "inactive"
[data-disabled]Present when disabled
[data-orientation]"horizontal" | "vertical"

Content

Contains the content associated with each trigger.

PropTypeDefault
value *string —
A unique value that associates the content with a trigger.
forceMount boolean —
Used to force mounting when more control is needed. Useful when controlling animation with Angular animation libraries.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"active" | "inactive"
[data-orientation]"horizontal" | "vertical"

Examples

Basic

A simple tabs component with two panels.

Html
<Tabs defaultValue="account" class="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p>Make changes to your account here.</p>
  </TabsContent>
  <TabsContent value="password">
    <p>Change your password here.</p>
  </TabsContent>
</Tabs>

Vertical orientation

Use the orientation prop for vertical tabs.

Html
<Tabs defaultValue="tab1" orientation="vertical" class="flex gap-4">
  <TabsList class="flex-col h-auto">
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <div class="flex-1">
    <TabsContent value="tab1">Content 1</TabsContent>
    <TabsContent value="tab2">Content 2</TabsContent>
    <TabsContent value="tab3">Content 3</TabsContent>
  </div>
</Tabs>

Controlled

Control the active tab from outside the component.

Html
// In your component:
activeTab = signal('account');

// In template:
<Tabs [value]="activeTab()" (valueChange)="activeTab.set($event)">
  <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>

<Button (click)="activeTab.set('password')">Go to Password</Button>

Manual activation

By default, tabs activate automatically on focus. Set activationMode to manual to require a click.

Html
<Tabs defaultValue="tab1" activationMode="manual">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    Focus with arrow keys, then press Enter to activate.
  </TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Accessibility

Adheres to the Tabs WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Tab When focus moves onto the tabs, focuses the active trigger.
ArrowDown Moves focus to the next trigger (vertical orientation) and activates its associated content.
ArrowRight Moves focus to the next trigger (horizontal orientation) and activates its associated content.
ArrowUp Moves focus to the previous trigger (vertical orientation) and activates its associated content.
ArrowLeft Moves focus to the previous trigger (horizontal orientation) and activates its associated content.
Home Moves focus to the first trigger and activates its associated content.
End Moves focus to the last trigger and activates its associated content.