SGDS Stepper Component Skill

<sgds-stepper> renders a step indicator and manages a multi-step workflow. Steps and their associated content components are declared via the steps property — an array of IStepMetaData objects. Navigation is controlled programmatically via public methods or the sgds-arrived event.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Horizontal steps (default)? → orientation="horizontal"

Vertical steps? → orientation="vertical"

Allow clicking a step to jump to it? → clickable

What is component in each step? → A Vue/React/Angular component, or any arbitrary value identifying content to show for that step