A simple (optionally interactive) representation of the current state of a user's progress through a linear sequence of steps.

Stepper presents a linear sequence of steps as a sequence of icon / label pairs in which the (potentially clickable) icons represent the status of the step ("completed", "active/current" or "pending"), and are linked by connectors (with arrowheads when orientation is set to "horizontal", without arrowheads when orientation is set to "vertical").

In either orientation, the component dynamically adapts itself to the constraints of the screen real estate available to it, in "horizontal" mode expanding/shrinking the widths of the connector arrows as necessary to fill the available width, and in "vertical" mode expanding/shrinking the heights of the vertical connectors to accommodate any label wrapping that may occur due to constraints on available width.

The effective status of each step in the sequence is implied by a single top-level property: activeStepIndex. Any steps preceding the one denoted by this are implicitly deemed to have been "completed"; any subsequent ones are implicitly deemed to be in the "pending" state (regardless of whether they have been visited before).

Where enabled (by specifying the optional implicitly boolean-valued attribute: interactive, or equivalently by setting the corresponding property true), the icons for "completed" steps are rendered as clickable buttons that fire "completedStepIconClicked" events when clicked. It is up to the client-implemented handler for these events to manage any updates to the stepper's state by manipulating activeStepIndex as appropriate.

For reference, the minimal "completedStepIconClicked" event handler used for the "interactive" examples in the "Live Demo" below looks like this:

function handleCompletedStepIconClicked(e) {

const

{ target: uwcStepperElem, detail = {} } = e,

{ stepIndex } = detail;

if (uwcStepperElem && ! isNaN(stepIndex))

uwcStepperElem.activeStepIndex = stepIndex;

}

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.