Stepper

mat-stepper provides a wizard-like workflow for multi-step forms.

Linear Stepper

Horizontal linear stepper with validation on each step.

Personal Info
Contact
Done
<mat-horizontal-stepper [linear]="true">
  <mat-step label="Personal Info">
    <ng-template matStepContent>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput [(ngModel)]="name" name="name" required>
      </mat-form-field>
      <button mat-raised-button color="primary" matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step label="Contact">
    <ng-template matStepContent>
      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput [(ngModel)]="email" name="email" type="email" required>
      </mat-form-field>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-raised-button color="primary" matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step label="Done">
    <ng-template matStepContent>
      <p>Review your information</p>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-raised-button color="primary" (click)="stepper.reset()">Reset</button>
    </ng-template>
  </mat-step>
</mat-horizontal-stepper>

Non-Linear Stepper

Vertical non-linear stepper allows free navigation between steps.

Basic Info
<mat-vertical-stepper [linear]="false">
  <mat-step label="Basic Info" [editable]="true">
    <ng-template matStepContent>
      <mat-form-field>
        <mat-label>First Name</mat-label>
        <input matInput [(ngModel)]="firstName" name="firstName">
      </mat-form-field>
      <button mat-raised-button color="primary" matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step label="Additional Info" [editable]="true">
    <ng-template matStepContent>
      <mat-form-field>
        <mat-label>Company</mat-label>
        <input matInput [(ngModel)]="company" name="company">
      </mat-form-field>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-raised-button color="primary" (click)="stepper.reset()">Done</button>
    </ng-template>
  </mat-step>
</mat-vertical-stepper>