COMPONENTS / ATOMS / al-stepper-item← ALL COMPONENTS

Stepper Item

<al-stepper-item><ALStepperItem> REACTbeta

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

PLAYGROUND3 CONTROLS

PREVIEW / al-stepper-item / ALTITUDE

Loading preview

Label

Supporting text

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

NOT IN FIGMAAltitude Design System

This component exists in code and has no Figma component set.

DECIDED BY: NEVER SYNCED
FIGMA SIDE: NEVER OBSERVED
LAST CONFIRMED SYNC: NEVER
PUBLIC SURFACE: 5 ATTR · 3 SLOT · 0 EVENT · 0 PART

The two sides have never been confirmed equal, so there is no baseline to compare against.

Known missing in Figma (altitude-figma-sync MISSING_IN_FIGMA) — needs a bespoke build.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEstepper-item--ActivePASS

Advanced statesAXE7 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 · 8 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 8 STORIES.

INSTALL@southleft/al-web-components/components/stepper-item

import '@southleft/al-web-components/components/stepper-item';
import { ALStepperItem } from '@southleft/al-react';

API — 5 PROPS5 DOCUMENTED

PROPTYPEDEFAULT

variant'vertical'Variant - **default** renders a Stepper item with a horizontal layout - **vertical** renders a Stepper item with a vertical layout—

isActivebooleanIs active? - A visual representation of a step with an active/current state—

isCompletebooleanIs complete? - A visual representation of a step with a completed state—

isLastbooleanIs last? - A visual representation of the last step within an ALStepper - Dynamically set by the parent—

stepNumbernumberStep number - The number that appears for each step - Dynically set by the parent1

SLOTS3

SLOTDESCRIPTION

(default)The label for each stepper item

iconThe icon that displays next to the label

descriptionThe description that displays below the label

EVENTS0

THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.

SOURCE — components/stepper-item/stepper-item.ts · Atoms/Navigation/Stepper Item