Tabs

Tabs provides an accessible way to organize content into multiple sections that users can switch between.

It supports both uncontrolled (simple) and controlled (advanced state management) usage.

Basic Usage (Uncontrolled)

<Tabs>
  <Tabs.Tab label="Overview" />
  <Tabs.Tab label="Settings" />
  <Tabs.Tab label="Logs" />

  <Tabs.Panel>Overview content goes here.</Tabs.Panel>
  <Tabs.Panel>Settings configuration panel.</Tabs.Panel>
  <Tabs.Panel>System logs and activity.</Tabs.Panel>
</Tabs>

Overview content goes here.

Controlled Tabs

const [activeTab, setActiveTab] = useState(0);

<Tabs activeIndex={activeTab} onChange={setActiveTab}>
  <Tabs.Tab label="Overview" />
  <Tabs.Tab label="Settings" />
  <Tabs.Panel>Overview content</Tabs.Panel>
  <Tabs.Panel>Settings content</Tabs.Panel>
</Tabs>

Features

• Full keyboard navigation support
• Proper ARIA attributes (role="tab", aria-selected)
• Clean active state styling using design tokens
• Controlled and uncontrolled modes

Props

Tabs

Prop	Type	Default	Description
defaultIndex	number	0	Initial active tab (uncontrolled)
activeIndex	number	—	Controlled active tab index
onChange	function	—	Called when tab changes
children	ReactNode	—	Tabs.Tab and Tabs.Panel elements

Tabs.Tab

Prop	Type	Description
label	string	Text shown in the tab

Tabs.Panel

Prop	Type	Description
children	ReactNode	Content of the tab panel

Accessibility

• Uses proper role="tab" and aria-selected
• Keyboard accessible tab switching
• Focus management between tabs and panels

Best Practices

• Keep tab labels short and clear
• Use controlled mode when you need to sync tab state with URL or other UI
• Combine with Card for complex content sections

Related Components

• Accordion — For vertical expandable sections
• Step — For linear processes

Next: Chip →