Stepper

Demo & usage

More examples

<sv-stepper [items]="steps" variant="line" orientation="vertical" [activeIndex]="step" />

<sv-stepper-pro
  [items]="steps"
  orientation="vertical"
  [linear]="true"
  [interactive]="true"
  [showDescriptions]="true"
  [activeIndex]="step"
  (stepChange)="step = $event"
  (stepBlocked)="onBlocked($event)" />

<sv-stepper variant="tracker" [items]="orderSteps" [activeIndex]="3" [interactive]="false" />

When to use

• Job: workflow state — renders step buttons and emits step events; it never navigates the page (compare all seven in the “Choosing a navigation pattern” guide under Guides).
• Guiding users through a sequential, multi-step process (checkout, onboarding, wizards).
• You want progress indication, and — on the Pro package — per-step validation gating.
• For non-sequential views, use Tabs; for an overlay walkthrough, a Product Tour.

Async states

• loading
• error
• retry

Saved state

Stored kinds

• sv-stepper/resume

What you will find under your own storage key. You choose the key; the blob names its own kind and schema version, so a component never reads state another one wrote.

Reading it back

Restore through the component's own restore… helper rather than casting the parsed JSON. A blob from an older release is migrated where it can be and refused with a reason where it cannot — so an upgrade never silently applies last month's shape to this month's fields.

Outputs

<sv-stepper-pro>

Also in this family — SvStepperProComponent from @styloviz-pro/stepper.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-stepper
  [items]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `items`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Six visual variants — default, pill, minimal, icon, dot, line — all included in the free package.
• Horizontal or vertical orientation.
• Pro adds: linear wizard mode with per-step validation, guard rules, branch telemetry, and roving-tabindex hotkeys.

Best practices

• Do: Use `[linear]="true"` (Pro) when later steps depend on earlier ones being valid.
• Do: Clearly mark completed, current and blocked steps.
• Tip: Switch to vertical orientation when step descriptions are long.

Accessibility

• Rendered as a labelled `list` of `listitem`s; each step is a real `<button>` (announced as a button) that exposes completed/current/disabled state via `aria-current="step"` and `aria-disabled`.
• Keyboard reachable via a roving tabindex: the current step is tabbable and Arrow/Home/End move between steps, with optional number hotkeys (`enableHotkeys`).