stepper-demo.html

<h1>Stepper Demo</h1>
<p>
  <mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
</p>
<p>
  <mat-checkbox [(ngModel)]="disableRipple">Disable header ripple</mat-checkbox>
</p>
<p>
  <mat-checkbox [(ngModel)]="isVertical">Vertical</mat-checkbox>
</p>
<p>
  <button mat-stroked-button (click)="showLabelBottom = !showLabelBottom">
    Toggle label position
  </button>
</p>
<p>
  <mat-form-field>
    <mat-label>Theme</mat-label>
    <mat-select [(ngModel)]="theme">
      @for (theme of availableThemes; track theme) {
        <mat-option [value]="theme.value">{{theme.name}}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</p>

<h2>Linear Stepper Demo using a single form</h2>
<form [formGroup]="formGroup">
  <mat-stepper
    #linearStepper="matVerticalStepper"
    formArrayName="formArray"
    [orientation]="isVertical ? 'vertical' : 'horizontal'"
    [linear]="!isNonLinear"
    [disableRipple]="disableRipple"
    [color]="theme">
    <mat-step formGroupName="0" [stepControl]="formArray?.get([0]) === null ? undefined! : formArray?.get([0])!">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput formControlName="firstNameFormCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Last name</mat-label>
        <input matInput formControlName="lastNameFormCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </mat-step>

    <mat-step formGroupName="1" [stepControl]="formArray?.get([1]) === null ? undefined! : formArray?.get([1])!"
              optional>
      <ng-template matStepLabel>
        <div>Fill out your email address</div>
      </ng-template>
      <mat-form-field>
        <mat-label>Email address</mat-label>
        <input matInput formControlName="emailFormCtrl">
        <mat-error>The input is invalid.</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Confirm your information</ng-template>
      Everything seems correct.
      <div>
        <button mat-button>Done</button>
        <button type="button" mat-button (click)="linearStepper.reset()">Reset</button>
      </div>
    </mat-step>
  </mat-stepper>
</form>

<h2>Linear Horizontal Stepper Demo using a different form for each step</h2>
<mat-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
                        [disableRipple]="disableRipple"
                        [labelPosition]="showLabelBottom ? 'bottom' : 'end'"
                        [color]="theme">
  <mat-step [stepControl]="nameFormGroup">
    <form [formGroup]="nameFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput formControlName="firstNameCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Last name</mat-label>
        <input matInput formControlName="lastNameCtrl" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="emailFormGroup" optional>
    <form [formGroup]="emailFormGroup">
      <ng-template matStepLabel>Fill out your email address</ng-template>
      <mat-form-field>
        <mat-label>Email address</mat-label>
        <input matInput formControlName="emailCtrl">
        <mat-error>The input is invalid</mat-error>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <form>
      <ng-template matStepLabel>Confirm your information</ng-template>
      Everything seems correct.
      <div>
        <button mat-button>Done</button>
        <button type="button" mat-button (click)="linearHorizontalStepper.reset()">Reset</button>
      </div>
    </form>
  </mat-step>
</mat-stepper>

<h2>Vertical Stepper Demo</h2>
<mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
<mat-stepper orientation="vertical" [color]="theme">
  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>Fill out your name</ng-template>
    <mat-form-field>
      <mat-label>First name</mat-label>
      <input matInput>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Last name</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>
      <div>Fill out your phone number</div>
    </ng-template>
    <mat-form-field>
      <mat-label>Phone number</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step [editable]="!isNonEditable">
    <ng-template matStepLabel>
      <div>Fill out your address</div>
    </ng-template>
    <mat-form-field>
      <mat-label>Address</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Confirm your information</ng-template>
    Everything seems correct.
    <div>
      <button mat-button>Done</button>
    </div>
  </mat-step>
</mat-stepper>

<h2>Horizontal Stepper Demo with Text Label</h2>
<mat-stepper [color]="theme">
  <mat-step label="Fill out your name">
    <mat-form-field>
      <mat-label>First name</mat-label>
      <input matInput>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Last name</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step label="Fill out your phone number">
    <mat-form-field>
      <mat-label>Phone number</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step label="Fill out your address">
    <mat-form-field>
      <mat-label>Address</mat-label>
      <input matInput>
    </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <mat-step label="Confirm your information">
    Everything seems correct.
    <div>
      <button mat-button>Done</button>
    </div>
  </mat-step>
</mat-stepper>

<h2>Horizontal Stepper Demo with Templated Label</h2>
<mat-stepper [color]="theme">
  @for (step of steps; track step) {
    <mat-step>
      <ng-template matStepLabel>{{step.label}}</ng-template>
      <mat-form-field>
        <mat-label>Answer</mat-label>
        <input matInput [(ngModel)]="step.content">
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
  }
</mat-stepper>

<h2>Stepper with autosize textarea</h2>
<mat-stepper [color]="theme">
  <mat-step label="Step 1">
    <mat-form-field>
      <mat-label>Autosize textarea</mat-label>
      <textarea matInput cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
    </mat-form-field>
  </mat-step>
</mat-stepper>