COMPONENTS / ATOMS / al-tab-panel← ALL COMPONENTS

Tab Panel

<al-tab-panel><ALTabPanel> REACTbetaOPEN IN FIGMA ↗

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

PLAYGROUND1 CONTROL
PREVIEW / al-tab-panel / ALTITUDE
Loading preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis sed donec lacinia, pariatur orci tempor sagittis ultrices. Ut lorem commodo amet pariatur, phasellus tempor praesent fugiat do nulla mollit. Commodo ea turpis lorem sagittis leo minim tellus, tellus adipiscing dolore. Eu tempor aliqua qui gravida nisi curabitur, sagittis ad ipsum.

Irure ea incididunt varius odio laboris sint, proident esse lorem ipsum. Varius minim mollit luctus id magna fugiat adipiscing, nulla lacinia rhoncus. Tellus lorem aliquip tempor sagittis auctor ad, qui facilisis tellus. Commodo voluptate magna do auctor, lacus commodo commodo porttitor aute deserunt.

 Button
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 · Tab Panel7 PROPERTY DIFFSFROM 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-28
PUBLIC SURFACE
4 ATTR · 1 SLOT · 0 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/border/radius/@[token-binding] missing-in-code— / theme/border/radius/@
theme/color/background/primary-default[token-binding] missing-in-code— / theme/color/background/primary-default
theme/color/content/neutral-default[token-binding] missing-in-code— / theme/color/content/neutral-default
theme/color/content/primary-weak[token-binding] missing-in-code— / theme/color/content/primary-weak
theme/icon/md[token-binding] missing-in-code— / theme/icon/md
theme/size/control[token-binding] missing-in-code— / theme/size/control
theme/space/xs[token-binding] missing-in-code— / theme/space/xs
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtab-panel--DefaultPASS
Advanced statesAXE0 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 · 1 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 1 STORIES.
INSTALL@southleft/al-web-components/components/tab-panel
import '@southleft/al-web-components/components/tab-panel';
import { ALTabPanel } from '@southleft/al-react';
API — 4 PROPS4 DOCUMENTED
PROPTYPEDEFAULT
isActivebooleanActive state
- **true** Renders a tab panel with selected/active state
- **false** Renders a tab panel without selected/active state—
ariaIdstringID used to connect the tab panel to the tab aria-controls—
ariaLabelledBystringAria labelledby property
- Used to connect tab trigger and tab panel for accessibility—
idxnumberIndex to track tab panel0
SLOTS1
SLOTDESCRIPTION
(default)The tab panel content
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
SOURCE — components/tab-panel/tab-panel.ts · Atoms/Tab Panel