Stepper

Displays sequential steps

Demo

API

Tag

Name	Description
`<s-stepper>`	Custom Element

Attributes

Name	Value	Required	Description
`stepitems`	String		Stringified JSON array of stepItem objects. See Guidelines below.
`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 stepItem objects. See Guidelines below.
`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 stepItem objects. See Guidelines below.
`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

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

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 }, ]; const stepper = document.querySelector("s-stepper"); stepper.stepItems = stepItems;

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