Tabs

Tabbed navigation for switching between content panels. Keyboard navigable, WAI-ARIA compliant.

Import

import { Tabs, TabList, Tab, TabPanel } from '@arcana-ui/core'

Usage

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="analytics">Analytics</Tab>
    <Tab value="settings">Settings</Tab>
  </TabList>
  <TabPanel value="overview">
    <p>Overview content here.</p>
  </TabPanel>
  <TabPanel value="analytics">
    <p>Analytics charts here.</p>
  </TabPanel>
  <TabPanel value="settings">
    <p>Settings form here.</p>
  </TabPanel>
</Tabs>

Controlled

const [tab, setTab] = useState('overview')
 
<Tabs value={tab} onValueChange={setTab}>
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="analytics">Analytics</Tab>
  </TabList>
  <TabPanel value="overview">...</TabPanel>
  <TabPanel value="analytics">...</TabPanel>
</Tabs>

Props

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initial active tab (uncontrolled)
`value`	`string`	—	Active tab (controlled)
`onValueChange`	`(value: string) => void`	—	Called when tab changes
`variant`	`'line' \| 'pills' \| 'enclosed'`	`'line'`	Visual style
`className`	`string`	—	Additional CSS classes

Tab

Prop	Type	Default	Description
`value`	`string`	—	Tab identifier
`disabled`	`boolean`	`false`	Disable this tab
`children`	`React.ReactNode`	—	Tab label

TabPanel

Prop	Type	Default	Description
`value`	`string`	—	Associated tab value
`children`	`React.ReactNode`	—	Panel content

Disabled tabs

<Tab value="billing" disabled>Billing (coming soon)</Tab>

Accessibility

TabList has role="tablist"
Each Tab has role="tab" with aria-selected and aria-controls
Each TabPanel has role="tabpanel" with aria-labelledby
Arrow keys navigate between tabs
Home/End jump to first/last tab
Inactive panels are hidden with aria-hidden and display: none

Accordion — collapsible sections (alternative to tabs for longer content)

Tabs

On this page