Stepper for Angular

import { AuiStepper } from '@absoluteui/angular/stepper';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Stepper page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { stepper: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { StepperNavigateDetail, StepperStep } from '@absoluteui/components/stepper';
import { AuiStepper } from '@absoluteui/angular/stepper';

@Component({
  selector: 'app-checkout-steps',
  imports: [AuiStepper],
  template: `<aui-stepper label="Checkout" [steps]="steps" [value]="current" (changed)="current = $event.value" (aui-navigate)="guard($event)"></aui-stepper>`,
})
export class CheckoutStepsComponent {
  current = 'cart';
  readonly steps: StepperStep[] = [
    { id: 'cart', label: 'Cart', status: 'complete' },
    { id: 'shipping', label: 'Shipping' },
    { id: 'payment', label: 'Payment' },
  ];

  guard(event: Event): void {
    const { id } = (event as CustomEvent<StepperNavigateDetail>).detail;
    if (id === 'payment' && !this.shippingValid()) event.preventDefault();
  }

  private shippingValid(): boolean {
    return true;
  }
}

<aui-stepper>

Class AuiStepper; template reference #ref="auiStepper".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the <nav> (aria-label), e.g. “Checkout progress”. Must not be empty.
steps	readonly StepperStep[]		Required. Steps in order (at least one). Ids must be unique and non-empty; labels must be non-empty. status is consumer-owned; href renders a reachable step as a link.
orientation	StepperOrientation	'horizontal'	Layout. A horizontal stepper renders vertically when its container is 30rem wide or narrower.
linear	boolean	true	When true, a step after the current one is reachable only when every step before it has status ‘complete’. Earlier steps are always reachable unless disabled.
direction	Direction	'ltr'	‘rtl’ sets dir=“rtl” on the <nav>; ‘ltr’ leaves the document direction in effect.
icons	Partial<StepperIcons>		Icon slot overrides for the step indicator.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string	(valueChange)	Current step id. Must be the id of an existing step.

Outputs

Output	Payload	Description
(navigate)	StepperNavigateDetail	The user activated a reachable step (unmodified primary click, Enter, or Space on a button). preventDefault keeps the current step and stops link navigation. Re-emits aui-navigate.
(changed)	StepperChangeDetail	The current step changed after an uncanceled aui-navigate. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
state(id: string): StepperStepState | null | undefined	Resolved state (‘current’ | ‘complete’ | ‘error’ | ‘upcoming’) of a step, or null for an unknown id.
isReachable(id: string): boolean | undefined	Whether the user can activate the step in the current state. False for the current step, disabled steps, and unknown ids.
select(id: string): void	Make a step current programmatically. No events and no reachability check. Throws STEPPER_OPTIONS for an unknown id.