Tabs

Alpha

An accessible tab interface with automatic keyboard navigation and compound component API.

Import

import { Tabs } from "@compa11y/react";

Usage

Example.tsx

import { Tabs } from "@compa11y/react";

function Example() {
  return (
    <Tabs defaultValue="react">
      <Tabs.List aria-label="Framework">
        <Tabs.Tab value="react">React</Tabs.Tab>
        <Tabs.Tab value="vue">Vue</Tabs.Tab>
        <Tabs.Tab value="svelte">Svelte</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="react">
        React content goes here.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        Vue content goes here.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        Svelte content goes here.
      </Tabs.Panel>
    </Tabs>
  );
}

Features

Arrow key navigation between tabs
Automatic tab activation
Compound component API
ARIA tabs pattern compliant
Proper role and aria attributes

Props

Tabs component props
Prop	Type	Default	Description
`defaultValue`	`string`	-	Initially selected tab value
`value`	`string`	-	Controlled selected tab value
`onValueChange`	`(value: string) => void`	-	Called when selected tab changes

Sub-components

Tabs.List

Tabs.List props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Tab buttons
`aria-label`	`string`	-	Accessible label for the tab list

Tabs.Tab

Tabs.Tab props
Prop	Type	Default	Description
`value`*	`string`	-	Tab identifier
`children`*	`ReactNode`	-	Tab label

Tabs.Panel

Tabs.Panel props
Prop	Type	Default	Description
`value`*	`string`	-	Associated tab value
`children`*	`ReactNode`	-	Panel content

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Tabs
Key	Action
`ArrowLeft`	Moves to previous tab
`ArrowRight`	Moves to next tab
`Home`	Moves to first tab
`End`	Moves to last tab