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-lib/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>

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

A summary of the project.

Unstyled

Same component — Kernel look stripped. See Platforms.

default tab

disable 'activity' tab

Usage

<Tabs defaultValue="overview">
  <TabsList aria-label="Project sections">
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
    <Tab value="settings">Settings</Tab>
  </TabsList>
  <TabPanel value="overview">A summary of the project.</TabPanel>
  <TabPanel value="activity">Recent commits and comments.</TabPanel>
  <TabPanel value="settings">Project-level configuration.</TabPanel>
</Tabs>

<kernel-tabs default-value="overview">
  <kernel-tabs-list aria-label="Project sections">
    <kernel-tab value="overview">Overview</kernel-tab>
    <kernel-tab value="activity">Activity</kernel-tab>
    <kernel-tab value="settings">Settings</kernel-tab>
  </kernel-tabs-list>
  <kernel-tab-panel value="overview">A summary of the project.</kernel-tab-panel>
  <kernel-tab-panel value="activity">Recent commits and comments.</kernel-tab-panel>
  <kernel-tab-panel value="settings">Project-level configuration.</kernel-tab-panel>
</kernel-tabs>

Props

Props for Tabs.
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.