Components

Stepper

Angular Material Stepper presents a wizard or multi-step form in a linear sequence, guiding users through a defined set of steps.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Stepper and gives it a more modern appearance.

You are now done.

<mat-stepper [linear]="false" #stepper>
  <mat-step [stepControl]="firstFormGroup" label="Fill out your name">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput formControlName="firstCtrl" required />
      </mat-form-field>
      <button matButton matStepperNext>Next</button>
    </form>
  </mat-step>
  
  <mat-step [stepControl]="secondFormGroup" label="Fill out your address">
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" required />
      </mat-form-field>
      <button matButton matStepperPrevious>Back</button>
      <button matButton matStepperNext>Next</button>
    </form>
  </mat-step>
  
  <!-- Custom icons -->
  <ng-template matStepperIcon="edit">
    <mat-icon svgIcon="pencil" class="size-3"/>
  </ng-template>
  <ng-template matStepperIcon="done">
    <mat-icon svgIcon="check" class="size-4"/>
  </ng-template>
  <ng-template matStepperIcon="error">
    <mat-icon svgIcon="circle-alert" class="size-3.5"/>
  </ng-template>
</mat-stepper>