# Stepper

> Multi-step wizard. Numbered headers with completed / active / pending states, content body for the active step. Two-way bind `[(active)]` to the step index.

Source: https://ngwr.dev/reference/components/stepper  
Kind: Composite

## Installation

```angular-ts
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.

```angular-html
<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.

```angular-html
<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

```angular-html
<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.

```html
<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` |