Tabs

There's no native tabs element yet, this is the WAI-ARIAtablist pattern: real <button> tabs with roving tabIndex and arrow-key navigation, and real panels hidden with the native hidden attribute, not just visually, but genuinely removed from layout and the accessibility tree.

A summary of the project.

Usage

import { Tabs, TabsList, Tab, TabPanel } from "@kernelui/react";

<Tabs defaultValue="profile">
  <TabsList aria-label="Account settings">
    <Tab value="profile">Profile</Tab>
    <Tab value="billing">Billing</Tab>
    <Tab value="security">Security</Tab>
  </TabsList>
  <TabPanel value="profile">Update your name, email, and avatar.</TabPanel>
  <TabPanel value="billing">Manage your plan and payment methods.</TabPanel>
  <TabPanel value="security">Change your password and enable 2FA.</TabPanel>
</Tabs>

Props

Component	Prop	Type
`Tabs`	`defaultValue`	string (required)
`Tabs`	`value` / `onValueChange`	string / (value) => void
`Tab`	`value`	string (required)
`TabPanel`	`value`	string (required)

Accessibility

Left/Right, Home, and End move focus and activate the corresponding tab (automatic activation).
Each panel is tabIndex=0, so keyboard users can move directly from the tab into the panel's content.