Installation
import { WrStepper, WrStep } from 'ngwr/stepper';
@Component({ imports: [WrStepper, WrStep] })
export class MyComponent {
protected readonly step = signal(0);
}Basic
Click any header to jump to that step.
<wr-stepper [(active)]="step">
<wr-step label="Account">Account form…</wr-step>
<wr-step label="Profile" description="Optional">Profile form…</wr-step>
<wr-step label="Confirm">Review and submit…</wr-step>
</wr-stepper>Linear
Headers past the latest completed step are locked. Use next() / prev() to navigate.
<wr-stepper #stepper [(active)]="step" linear>
<wr-step label="One" [completed]="oneDone()">…</wr-step>
<wr-step label="Two" [completed]="twoDone()">…</wr-step>
<wr-step label="Three">…</wr-step>
</wr-stepper>
<button (click)="stepper.next()">Next</button>Vertical
<wr-stepper [(active)]="step" orientation="vertical">
<wr-step label="Pick a plan">…</wr-step>
<wr-step label="Billing">…</wr-step>
<wr-step label="Done">…</wr-step>
</wr-stepper>Narrow container (container query)
With responsive, a horizontal stepper queries its own width and drops to the vertical layout when its column is too narrow — even on a wide page. The box below is fixed at 340px.
<div style="width: 340px"><wr-stepper responsive>…</wr-stepper></div>API
| Name | Description | Type | Default |
|---|---|---|---|
[(active)] | Active step index (two-way bindable). | number | 0 |
orientation | Layout direction. | 'horizontal' | 'vertical' | 'horizontal' |
linear | Lock steps after the latest completed one. | boolean | false |
responsive | Drop a horizontal stepper to vertical when its own box is too narrow (container query, not viewport). | boolean | false |
next() / prev() / goTo(i) | Imperative navigation. | method | — |
<wr-step>.label | Header text. | string | '' |
<wr-step>.description | Secondary header text. | string | '' |
<wr-step>.optional | Marks the step as optional in the header. | boolean | false |
<wr-step>.completed | Override completion. When null, derived from active > index. | boolean | null | null |
<wr-step>.disabled | Blocks header clicks. | boolean | false |
CSS variables
Custom properties ngwr/stepper publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-stepper-connector | var(--wr-color-outline) | .wr-stepper |
--wr-stepper-indicator-size | 1.75rem | .wr-stepper |
--wr-stepper-muted | var(--wr-color-on-surface-muted) | .wr-stepper |