COMPONENTS / MOLECULES / al-tabs← ALL COMPONENTS

Tabs

<al-tabs><ALTabs> REACTbetaOPEN IN FIGMA ↗

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

PLAYGROUND0 CONTROLS
PREVIEW / al-tabs / ALTITUDE
Loading preview
Overview Usage Accessibility4 Tokens Patterns Anatomy Behavior Theming Migration Changelog Tab panel 1 Tab panel 2 Tab panel 3 Tab panel 4 Tab panel 5 Tab panel 6 Tab panel 7 Tab panel 8 Tab panel 9 Tab panel 10
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 · Tabs1:1 ON EVERY PROPERTYFROM 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
2 ATTR · 2 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.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtabs--DefaultPASS
Advanced statesAXE3 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 · 4 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 4 STORIES.
INSTALL@southleft/al-web-components/components/tabs
import '@southleft/al-web-components/components/tabs';
import { ALTabs } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
variant'stretch'Tabs variant
- **default** Tabs are left-aligned, and the width of each tab is defined by the length of its content
- **stretch** Tabs stretch horizontally to have equal widths, which is calculated by the width of the screen divided by the number of tabs—
activeIndexnumberActive tab state
- Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)—
SLOTS2
SLOTDESCRIPTION
(default)The tab items for the tabs
panelThe tab panels that correspond to the slotted tab items
EVENTS1
EVENTDESCRIPTIONTYPE
onTabsChangeFired when the active tab changes, whether by user interaction or programmatically. Detail: `{ value, activeTabIdx }`.CustomEvent
PUBLIC METHODS10
METHODDESCRIPTION
syncTabWithPanel()Synchronize tabs with tab panels 1. Iterate through each tab item 2. Generate a unique ID for the tab item 3. Set the index and ariaId on the tab item 4. Generate a unique aria-controls value for the tab item 5. Set the index, ariaLabelledBy, and ariaId on the corresponding tab panel
setActiveTab()Set active tab 1. Mark the active tab as visually active 2. Find and mark the active tab panel as active based on the tab's index
setInactiveTab()Set inactive tab 1. Visually disable the currently active tab 2. Disable the currently active tab panel based on the active tab's index
handleOnScroll()Handle the scrolling behavior of the tab list 1. Check if the tab list is overflowing
handleOnResize()Handle the resize behavior of the window 1. Check if the tab list is overflowing
setIsScrollable()Set the 'isScrollable' state based on whether the .al-c-tabs__list element is overflowing. 1. Check if the scroll width of the tab list is greater than its client width 2. If it's overflowing, set 'isScrollable' to true 3. If it's not overflowing, set 'isScrollable' to false
handleOnTabSelect()Handle on select of a tab 1. Remove preivously selected tab selected state 2. Make the selected tab active 3. Dispatch a custom event
handleOnTabKeydown()Handle on keydown 1. If arrowRight key is pressed, set the next tab to active 2. If arrowLeft key is pressed, set the previous tab to active 3. If home key is pressed, set the first tab to active 4. If end key is pressed, set the last tab to active
setTabFocus()Focus the button element inside the active tab 1. Query the shadow DOM of the active tab for the button element with the class 'al-c-tab' 2. Set the focus on the found button element, making it the active element
setActiveAdjacentTab()Set the selected tab to the previous or next tab based on the 'isPrevious' flag
SOURCE — components/tabs/tabs.ts · Molecules/Navigation/Tabs