# Stepper Drive the UI with `activeStepIndex` and `(stepChange)`. Set `linear` when steps must be completed in order, and mutate each `Step`’s `completed`, `error`, `warning`, or `disabled` flags to mirror validation. Use `showDescriptions` for subtitled milestones and `orientation="vertical"` beside a detail pane. ## Import ```ts import { StepperComponent, type Step } from 'ui'; ``` ## Navigation without linear gating ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, Step, StepperComponent } from 'ui'; @Component({ selector: 'app-stepper-basic-example', standalone: true, imports: [ButtonComponent, StepperComponent], template: `
Back Next
`, }) export class StepperBasicExampleComponent { protected readonly steps = signal([ { id: 'scope', label: 'Scope' }, { id: 'details', label: 'Details' }, { id: 'publish', label: 'Publish' }, ]); protected readonly active = signal(0); protected prev(): void { this.active.update(i => Math.max(0, i - 1)); } protected next(): void { this.active.update(i => Math.min(this.steps().length - 1, i + 1)); } } ``` ## Linear completion ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, Step, StepperComponent } from 'ui'; @Component({ selector: 'app-stepper-linear-progress-example', standalone: true, imports: [ButtonComponent, StepperComponent], template: `
Back Mark done and continue Reset
`, }) export class StepperLinearProgressExampleComponent { protected readonly steps = signal([ { id: 'a', label: 'Inventory', description: 'Pick sources' }, { id: 'b', label: 'Mapping', description: 'Match fields' }, { id: 'c', label: 'Run', description: 'Start job' }, ]); protected readonly active = signal(0); protected prev(): void { this.active.update(i => Math.max(0, i - 1)); } protected completeAndNext(): void { const i = this.active(); const list = this.steps(); this.steps.update(prev => prev.map((s, idx) => (idx === i ? { ...s, completed: true } : s))); if (i < list.length - 1) { this.active.set(i + 1); } } protected reset(): void { this.active.set(0); this.steps.set([ { id: 'a', label: 'Inventory', description: 'Pick sources' }, { id: 'b', label: 'Mapping', description: 'Match fields' }, { id: 'c', label: 'Run', description: 'Start job' }, ]); } } ``` ## Vertical rail ```ts import { Component, signal } from '@angular/core'; import { BadgeComponent, Step, StepperComponent } from 'ui'; @Component({ selector: 'app-stepper-vertical-example', standalone: true, imports: [BadgeComponent, StepperComponent], template: `

Vertical steppers suit narrow rails next to a detail pane. Labels and descriptions stay aligned while the main surface swaps content.

`, }) export class StepperVerticalExampleComponent { protected readonly steps = signal([ { id: '1', label: 'Intake', description: 'Collect request' }, { id: '2', label: 'Legal', description: 'Review wording' }, { id: '3', label: 'Sign-off', description: 'Approver' }, ]); protected readonly active = signal(0); } ``` ## Step signals ```ts import { Component } from '@angular/core'; import { Step, StepperComponent } from 'ui'; @Component({ selector: 'app-stepper-step-states-example', standalone: true, imports: [StepperComponent], template: `
`, }) export class StepperStepStatesExampleComponent { protected readonly steps: Step[] = [ { id: 1, label: 'Done', completed: true }, { id: 2, label: 'Active', completed: false }, { id: 3, label: 'Blocked', error: true, completed: false }, { id: 4, label: 'Review', warning: true, completed: false }, { id: 5, label: 'Later', disabled: true, completed: false }, ]; } ``` ## Onboarding-style wizard ```ts import { Component, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BadgeComponent, ButtonComponent, CheckboxComponent, MessageBarComponent, Step, StepperComponent, TextComponent, } from 'ui'; @Component({ selector: 'app-stepper-onboarding-wizard-example', standalone: true, imports: [ FormsModule, BadgeComponent, ButtonComponent, CheckboxComponent, MessageBarComponent, StepperComponent, TextComponent, ], template: `
@if (showError()) {
}
@switch (active()) { @case (0) {
} @case (1) {
} @case (2) {
Review before creating These values will be applied to the new workspace.
Workspace name {{ workspaceName || '—' }}
URL slug {{ slug || '—' }}
Billing contact {{ billingEmail || '—' }}
Guest invites
} }
Back @if (active() < 2) { Continue } @else { Create workspace }
`, }) export class StepperOnboardingWizardExampleComponent { protected workspaceName = ''; protected slug = ''; protected billingEmail = ''; protected guestsOk = false; protected readonly showError = signal(false); protected readonly steps = signal([ { id: 'w', label: 'Workspace', description: 'Identity' }, { id: 'p', label: 'People', description: 'Access' }, { id: 'r', label: 'Review', description: 'Confirm' }, ]); protected readonly active = signal(0); protected back(): void { this.showError.set(false); this.active.update(i => Math.max(0, i - 1)); } protected forward(): void { const i = this.active(); if (i === 0 && this.workspaceName.trim().length < 2) { this.showError.set(true); return; } this.showError.set(false); this.steps.update(prev => prev.map((s, idx) => (idx === i ? { ...s, completed: true } : s))); if (i < this.steps().length - 1) { this.active.set(i + 1); } } protected create(): void { this.workspaceName = ''; this.slug = ''; this.billingEmail = ''; this.guestsOk = false; this.showError.set(false); this.active.set(0); this.steps.set([ { id: 'w', label: 'Workspace', description: 'Identity' }, { id: 'p', label: 'People', description: 'Access' }, { id: 'r', label: 'Review', description: 'Confirm' }, ]); } } ``` ## Accessibility ### Step control Each step is a `role="button"` with `tabindex="0"` when enabled. The active step sets `aria-current="step"`; disabled steps use `aria-disabled`. ### Linear order In linear mode, clicks that would skip incomplete work are ignored—keep primary actions in the content area so keyboard and pointer users get the same guardrails.