Components / navigation

navigation · @awesome-ds/react

Tabs

Tablist / tab / tabpanel pattern.

Rules: rule.a11y.wcag-aa, rule.components.state-matrix

State matrix

selectedrequired

Anatomy

  • tablist
  • tabs
  • active tabpanel

Keyboard contract

Left/Right arrows move tabs, Home/End jump, and selection follows focus.

Screen-reader contract

tab, aria-selected, and labelled tabpanel relationships are complete.

Content rules

  • Use short parallel tab labels.
  • Keep related content at one hierarchy level.

Public API

PropTyperequiredDescription
itemsTabItem[]requiredTabs and panels
defaultValuestring—Initially selected item
ariaLabelstring—Localized tab-list name

Adaptation contracts

RTL
Follow document direction for directional keys and visuals while preserving semantic order.
High contrast
Current, selected, expanded, and focus states remain distinct without fill alone.
Reduced motion
Move selection and disclosure state without animated travel.

Verification IDs

Tabs/arrows-home-end

Live

Live

Panel one

Copyable example

import { Tabs } from "@awesome-ds/react";

<Tabs items={[{value:'a',label:'A',content:'A'}]} />