COMPONENTS / MOLECULES / al-stepper← ALL COMPONENTS

Stepper

<al-stepper><ALStepper> REACTbeta

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

PLAYGROUND0 CONTROLS
PREVIEW / al-stepper / SOUTHLEFT
Loading preview
Label
Supporting text
Label
Supporting text
Label
Supporting text
Label
Supporting text
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.

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

CHECKEVIDENCEDETAILRESULT
Default stateAXEstepper--DefaultPASS
Advanced statesAXE1 further storyPASS
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 · 2 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 2 STORIES.

import '@southleft/al-web-components/components/stepper';
import { ALStepper } from '@southleft/al-react';
PROPTYPEDEFAULT
variant'vertical'Variant - **default** renders a Stepper with a horizontal layout - **vertical** renders a Stepper with a vertical layout
SLOTDESCRIPTION
(default)The stepper content, a set of stepper items

THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.

METHODDESCRIPTION
setStepNumber()Set step number 1. Loop through all the ALStepperItem's and set the step number based on the index 2. Check if it's the last item in the array and set the isLast property
setVerticalItems()Set vertical items 1. If the varient is equal to vertical, set the ALStepperItem's to vertical as well

SOURCE — components/stepper/stepper.ts · Molecules/Navigation/Stepper