COMPONENTS / ATOMS / al-tab← ALL COMPONENTS

Tab

<al-tab><ALTab> REACTbetaOPEN IN FIGMA ↗

Reference generated from the custom elements manifest — 5 properties, 1 slots, 1 events.

PLAYGROUND2 CONTROLS
PREVIEW / al-tab / ALTITUDE
Loading preview
Label2
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
FIGMA AHEADAltitude Design SystemFIGMA SET · Tab1 PROPERTY DIFFFROM TRACKED PROJECTION
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-23
PUBLIC SURFACE
5 ATTR · 1 SLOT · 1 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDISAGREEMENTCODE / CANVAS
theme/color/border/primary-default[token-binding] missing-in-code— / theme/color/border/primary-default
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtab--DefaultPASS
Advanced statesAXE4 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 5 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 5 STORIES.
INSTALL@southleft/al-web-components/components/tab
import '@southleft/al-web-components/components/tab';
import { ALTab } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
isActivebooleanActive state
- **true** Renders a tab with selected/active state
- **false** Renders a tab without selected/active state—
isDisabledbooleanDisabled attribute
- **true** Renders a tab with the disabled property and state
- **false** Renders a tab without the disabled property and state—
ariaIdstringID used to connect the tab panel to the tab aria-controls—
ariaControlsstringAria controls attribute
- Set by `<al-tabs>` to the id of the matching `<al-tab-panel>`
- **Not rendered as an attribute.** The panel's id lives inside
  `<al-tab-panel>`'s shadow root while this tab's `<button>` lives inside
  `<al-tab>`'s, and an IDREF cannot cross a shadow boundary — axe reported
  every value as `aria-valid-attr-value`. `aria-controls` is a SHOULD for
  `role="tab"`, not a MUST; the selected state still comes through
  `aria-selected`.—
idxnumberIndex to track tab0
SLOTS1
SLOTDESCRIPTION
(default)The tab label
EVENTS1
EVENTDESCRIPTIONTYPE
onTabSelectFired when this tab is selected. Detail: `{ value, index }` — the tab element itself and its index.CustomEvent
PUBLIC METHODS1
METHODDESCRIPTION
handleOnClick()Handle on click 1. Dispatch a custom event on click of the tab
SOURCE — components/tab/tab.ts · Atoms/Navigation/Tab