Tabs

molecules

Horizontal tab group with underline indicator. WAI-ARIA tabs pattern: role='tablist', roving tabindex, ArrowLeft/Right to navigate.

ARIA Role: tablist

Demo

Demo for Tabs (molecules)

Horizontal tab group with underline indicator. WAI-ARIA tabs pattern: role='tablist', roving tabindex, ArrowLeft/Right to navigate.

Props

Prop	Type	Required	Default	Description
`items`	`TabItem[]`	Yes	`—`	2-6 tabs
`activeId`	`string`	Yes	`—`
`onChange`	`(id: string) => void`	Yes	`—`

TypeScript Interface

interface TabsProps {
  items: { id: string; label: string; badge?: number; panel: React.ReactNode }[];
  activeId: string;
  onChange: (id: string) => void;
  ariaLabel: string;
}

Assertions (NASA Rule 5)

[type]items bounded 2-6 (NASA Rule 2)(NASA Rule 2)
[aria]role='tablist' aria-label required; each tab role='tab' with aria-selected + aria-controls(WAI-ARIA Tabs Pattern)

Usage

Import

import { Tabs } from '@epasslive/design-system'

Basic

<Tabs />

With Variants

<Tabs variant="primary" size="md" />