Orbit

Tabs

Source

A compound, Radix-based component for switching between related views. Compose Tabs with TabsList, TabsTrigger and TabsContent.

Overview

Each TabsTrigger is linked to a TabsContent by a shared value. Tabs can be uncontrolled with defaultValue or controlled with value and onValueChange.

Tabs is built on Radix primitives, so keyboard navigation, focus management and ARIA roles are handled for you. Wrap content in Box and Text to lay out each panel.

Basic

An uncontrolled set of tabs using defaultValue. The first trigger is active on mount.

A summary of recent revenue and customers.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="activity">Activity content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Controlled

Drive the active tab from state with value and onValueChange to keep selection in sync with the rest of your UI.

Billed every month, cancel anytime.

Selected value: monthly

const [tab, setTab] = useState('monthly')

<Tabs value={tab} onValueChange={setTab}>
  <TabsList>
    <TabsTrigger value="monthly">Monthly</TabsTrigger>
    <TabsTrigger value="yearly">Yearly</TabsTrigger>
  </TabsList>
  <TabsContent value="monthly">Billed every month</TabsContent>
  <TabsContent value="yearly">Billed once a year</TabsContent>
</Tabs>

Tabs props

value

string

The active tab value when used as a controlled component.

defaultValue

string

The initial active tab when used uncontrolled.

onValueChange

(value: string) => void

Called when the active tab changes.

orientation

'horizontal' | 'vertical'default: 'horizontal'

Orientation of the tab list for keyboard navigation.

TabsList props

vertical

booleandefault: false

Stacks the triggers in a column instead of a row.

className

string

Classes merged onto the list container.

TabsTrigger props

value

string

required

Identifies which TabsContent this trigger activates.

size

'default' | 'small'default: 'default'

Controls the trigger text size.

disabled

booleandefault: false

Prevents the trigger from being selected.

TabsContent props

value

string

required

Matches the value of the TabsTrigger that reveals it.