4.53.0

Stepper

Displays sequential steps

Demo

const stepItems = [{ "label": "First step with a name which is so long that it wraps", "completed": true, "substeps": [ { "label": "Substep 1 with a long label that wraps", "completed": true }, { "label": "Substep 2", "completed": true } ] }, { "label": "Second", "completed": true }, { "label": "Third", "active": true, "substeps": [ { "label": "Substep 1 with a long label that wraps", "completed": true }, { "label": "Substep 2", "completed": false } ] }, { "label": "Fourth", "substeps": [ { "label": "Substep 1", "completed": false }, { "label": "Substep 2", "completed": false } ] }]; const stepper = document.getElementById("stepper1"); stepper.stepItems = stepItems; const stepper2 = document.getElementById("stepper2"); stepper2.stepItems = stepItems; const stepper3 = document.getElementById("stepper3"); stepper3.stepItems = stepItems;

API

Tag

Name Description
<s-stepper> Custom Element

Attributes

Name Value Required Description
stepitems String

Stringified JSON array of step item objects. Each item can include an optional substeps array. See Guidelines and Substeps.
vertical Boolean attribute

Displays the steps vertically.
simplified Boolean attribute

Displays the simplified stepper variant.

Properties

Name Value Required Description
stepItems String

Stringified JSON array of step item objects. Each item can include an optional substeps array. See Guidelines and Substeps.
vertical Boolean attribute

Displays the steps vertically.
simplified Boolean attribute

Displays the simplified stepper variant.

Demo

API

Tag

Name
<SStepper>

Props

Name Value Required Description
stepItems Array

Array of step item objects. Each item can include an optional substeps array. See Guidelines and Substeps.
vertical Boolean

Displays the steps vertically.
simplified Boolean

Displays the simplified stepper variant.

Skylab React links

General information about using our React package

Typescript

Exported types

export type SubstepItem = { label: string; completed?: boolean; }; // Object provided (in array) to stepItems prop export type StepItem = { label: string; completed?: boolean; active?: boolean; substeps?: SubstepItem[]; };

Guidelines

Creating steps

The individual step items within the Stepper component are set via an array of objects.

const stepItems = [ { "label": string, // required "active": boolean, // gives active styling to item "completed": boolean, // gives completed styling to item "substeps": [ // optional; see Substeps below { "label": string, "completed": boolean }, ], }, ]; const stepper = document.querySelector("s-stepper"); stepper.stepItems = stepItems;

Substeps

Any step can include a substeps array. Each substep is an object with a required label and an optional completed flag. Completed substeps show a check in the marker.

The substeps list is only visible for steps that are completed or active. For steps that are still upcoming, substeps stay in the DOM but are hidden so the flow stays uncluttered.

The simplified variant shows only the current step label and count; it does not render substeps.

To pass the step items to the s-stepper component, you can either set the stepItems property equal to your array of objects, as in the code sample above, or you can stringify your array and set the stepitems attribute.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com