Tabs

Switches between related panels with complete keyboard navigation.

General workspace settings are visible.

Security settings are visible.

Astro

---
import { Tabs, Tab, TabPanel } from '@charvesta/cetha';
---

<Tabs id="settings" value="general" label="Settings">
  <Tab slot="list" tabsId="settings" value="general" active>General</Tab>
  <Tab slot="list" tabsId="settings" value="security">Security</Tab>
  <TabPanel tabsId="settings" value="general">General settings</TabPanel>
  <TabPanel tabsId="settings" value="security">Security settings</TabPanel>
</Tabs>

API reference

Prop	Type	Default	Description
`id`*	`string`	—	Shared Tabs identifier.
`value`*	`string`	—	Initial active value.
`label`*	`string`	—	Accessible tab list label.
`tabsId`*	`string`	—	Tab and TabPanel parent identifier.
`active`	`boolean`	`false`	Marks the initial active Tab.
`class`	`string`	—	Additional classes forwarded to the rendered element.

Accessibility

Arrow keys move focus and selection; Home and End jump to the first or last tab.