How to Use
Tabs
Tabs organizes content into switchable panels. It is a compound component: Tabs wraps TabList (the row of tab buttons), Tab (individual tab triggers), and TabPanel (content panels). Each Tab corresponds to a TabPanel by index — Tab[0] controls TabPanel[0]. Tabs is useful for grouping related content (settings, profiles, details) without requiring page navigation. The active tab is managed automatically — no state needed.
Basic Tabs
TabList renders the tab buttons horizontally. Each Tab accepts children (label text) and an optional isDisabled prop to prevent interaction. TabPanels render below the tab list — only the active panel is visible. The active tab is automatically managed: clicking a tab shows its corresponding panel. Use aria-label on TabList for screen reader context.
<Tabs>
<TabList aria-label="Settings tabs">
<Tab>Profile</Tab>
<Tab>Security</Tab>
<Tab isDisabled>Billing</Tab>
</TabList>
<TabPanel>
<p className="text-sm">Profile settings content goes here.</p>
</TabPanel>
<TabPanel>
<p className="text-sm">Security settings content goes here.</p>
</TabPanel>
<TabPanel>
<p className="text-sm">Billing is not available yet.</p>
</TabPanel>
</Tabs>Accessibility
Tabs uses role="tablist" on TabList, role="tab" on each Tab, and role="tabpanel" on each TabPanel. The active Tab has aria-selected="true". TabPanel has aria-labelledby pointing to the controlling Tab. Keyboard navigation: Arrow keys move between tabs, Enter/Space activates a tab, Home/End jumps to first/last tab. The disabled Tab has aria-disabled="true" and is skipped in keyboard navigation. Focus moves to the active tab panel content when a tab is activated.
Props Reference
All available props for Tabs. See the full API reference page for interactive playground examples.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "bordered" | "light" | "underlined" | "solid" | Tabs visual variant. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Tabs color. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Tabs size. |
| radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | "md" | Border radius. |
| fullWidth | boolean | false | Fill container width. |
| selectedKey | Key | — | Controlled selected tab. |
| defaultSelectedKey | Key | — | Default selected tab. |
| disabledKeys | Key[] | — | Disabled tab keys. |
| placement | "top" | "bottom" | "start" | "end" | "top" | Tab list placement. |
Best Practices
- ◆Tabs is a compound component — always nest TabList, Tab, and TabPanel inside Tabs
- ◆Use isDisabled on tabs whose content is not yet available or requires prerequisites
- ◆Use aria-label on TabList for screen reader accessibility (e.g., "Settings tabs", "Product tabs")
- ◆The active tab is managed automatically — no useState or onChange needed
- ◆Tab content is lazy by default — only the active TabPanel renders its children
- ◆Use 3-6 tabs for optimal usability; more than 6 may require scrolling or a dropdown overflow pattern