NAVIGATION

Tabs

Inline tab strip + matching content panels. Built on Radix Tabs — full keyboard wiring, ARIA semantics, and roving tabindex come from the primitive. Active tab is marked with a primary-colored 3px underline.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'damo-ui'

Basic usage

Overview panel. Place primary metrics, hero copy or a dashboard header here.

1<Tabs defaultValue="overview">
2  <TabsList>
3    <TabsTrigger value="overview">Overview</TabsTrigger>
4    <TabsTrigger value="settings">Settings</TabsTrigger>
5    <TabsTrigger value="billing">Billing</TabsTrigger>
6  </TabsList>
7  <TabsContent value="overview">…</TabsContent>
8  <TabsContent value="settings">…</TabsContent>
9  <TabsContent value="billing">…</TabsContent>
10</Tabs>

Props (Tabs root)

Tabs props
PropTypeDefaultDescription
valuestring—Controlled active tab value.
defaultValuestring—Uncontrolled initial active tab value.
onValueChange(value: string) => void—Fires when the active tab changes.
orientation'horizontal' | 'vertical''horizontal'Layout direction for keyboard navigation (arrow key axis).
activationMode'automatic' | 'manual''automatic'automatic activates a tab on focus; manual requires Enter/Space — useful when switching tabs is expensive.

Accessibility

  • Radix wires the ARIA Tabs pattern: role="tablist", role="tab", and role="tabpanel" with aria-controls / aria-labelledby linking them.
  • Keyboard: Tab moves into the tab strip; arrow keys cycle tabs; Home/End jump to the first/last tab. With activationMode="manual" the focused tab is activated only on Enter/Space.

Tabs vs SegmentedControl

Reach for SegmentedControl when the user is filtering or toggling visibility within the same panel; reach for Tabs when each value owns a meaningfully distinct content region with its own ARIA tab panel.

← HintDropdownMenu →