Stepper

Angular Bootstrap 5 Stepper / Wizard component

Responsive stepper built with Bootstrap 5, Angular and Material Design. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more

Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.

In this documentation, you can find examples of form wizard, vertical stepper, horizontal stepper, multi step form, mobile stepper, validation & more.

Note: Read the API tab to find all available options and advanced customization

Basic example

Initialize the stepper component using the code below.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
<mdb-stepper>
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Change steps using external elements

To go to the next or previous step, you can use the nextStep and previousStep methods. You can also choose a specific step using the changeStep method by entering the step index

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
<div class="mb-3">
  <button id="prev-step" class="btn btn-primary" (click)="stepper.previous()">
    prev
  </button>
  <button id="step-1" class="btn btn-primary" (click)="stepper.setNewActiveStep(0)">
    step1
  </button>
  <button id="step-2" class="btn btn-primary" (click)="stepper.setNewActiveStep(1)">
    step2
  </button>
  <button id="step-3" class="btn btn-primary" (click)="stepper.setNewActiveStep(2)">
    step3
  </button>
  <button id="next-step" class="btn btn-primary" (click)="stepper.next()">next</button>
</div>
<mdb-stepper #stepper>
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Linear stepper

Use [linear]="true" input to enable linear stepper. Linear stepper requires the users to complete previous steps before proceeding to following steps.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
<mdb-stepper [linear]="true">
  <mdb-step [stepForm]="firstFormGroup" [name]="'Step 1'">
    <form [formGroup]="firstFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="step1"
          class="form-control"
          formControlName="firstStep"
        />
        <label mdbLabel class="form-label" for="step1">Step 1</label>
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [stepForm]="secondFormGroup" [name]="'Step 2'">
    <form [formGroup]="secondFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="step2"
          class="form-control"
          formControlName="secondStep"
        />
        <label mdbLabel class="form-label" for="step2">Step 2</label>
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [name]="'Step 3'">
    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="step3" class="form-control" />
      <label mdbLabel class="form-label" for="step3">Step 3</label>
    </mdb-form-control>
    <button class="btn btn-primary" type="submit">Submit</button>
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor() {
    this.firstFormGroup = new FormGroup({
      firstStep: new FormControl('', [Validators.required]),
    });

    this.secondFormGroup = new FormGroup({
      secondStep: new FormControl('', Validators.required),
    });
  }

  get firstStep() {
    return this.firstFormGroup.get('firstStep');
  }
  get secondStep() {
    return this.secondFormGroup.get('secondStep');
  }
}

No editable stepper

You can use [editable]="false"input on mdb-step to prevent from editing the completed step again.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
<mdb-stepper>
  <mdb-step *ngFor="let step of steps" [name]="step.name" [editable]="false">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Vertical stepper

Use [orientation]="'vertical'" to change stepper orientation to vertical.

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. 
<mdb-stepper [orientation]="'vertical'">
  <mdb-step *ngFor="let step of steps" [name]="step.name" [editable]="false">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Mobile stepper

Use [mobile]="true"input on stepper with horizontal orientation to change component view to mobile.

    step 1 of 3
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
<mdb-stepper [mobile]="true">
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Mobile stepper progress bar

If the mobile stepper contains more than 4 steps, the progress bar will be displayed by default instead of dots. You can edit the step limit with the mobileBarBreakpoint input.

    step 1 of 5
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
  • 4 step4
  • 4 step4 
<mdb-stepper [mobile]="true">
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
    {
      name: 'Step 4',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
    {
      name: 'Step 5',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];
}

Optional step

You can mark a step as optional by adding [optional]="true" to it.

  • 1 step1
  • 2 step2
  • 3 step3 
<mdb-stepper [linear]="true">
  <mdb-step [stepForm]="firstFormGroup" [name]="'Step 1'">
    <form [formGroup]="firstFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="step1"
          class="form-control"
          formControlName="firstStep"
        />
        <label mdbLabel class="form-label" for="step1">Step 1</label>
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [stepForm]="secondFormGroup" [name]="'Step 2'" [optional]="true">
    <form [formGroup]="secondFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="step2"
          class="form-control"
          formControlName="secondStep"
        />
        <label mdbLabel class="form-label" for="step2">Step 2</label>
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [name]="'Step 3'">
    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="step3" class="form-control" />
      <label mdbLabel class="form-label" for="step3">Step 3</label>
    </mdb-form-control>
    <button class="btn btn-primary" type="submit">Submit</button>
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor() {
    this.firstFormGroup = new FormGroup({
      firstStep: new FormControl('', [Validators.required]),
    });

    this.secondFormGroup = new FormGroup({
      secondStep: new FormControl('', Validators.required),
    });
  }
}

Custom header

If you want to create a more detailed header you can do it by placing HTML code inside ng-template with mdbStepHeader directive.

  • 1

    Heading

    Subheading

    Total Sum: $100
  • 2 Step2
  • 3 step3 
<mdb-stepper>
  <mdb-step>
    <ng-template mdbStepHeader>
      <div class="container">
        <div class="row">
          <div class="col-auto d-flex flex-column">
            <p class="mb-auto h4">Heading</p>
            <p class="text-muted mb-2 pt-2"><small>Subheading</small></p>
          </div>
          <div class="col-auto d-flex align-items-center justify-content-center">
            <span>Total Sum: <strong>$100</strong></span>
          </div>
        </div>
      </div>
    </ng-template>
    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon1" class="form-control" />
      <label mdbLabel class="form-label" for="icon1">Step 1</label>
    </mdb-form-control>
  </mdb-step>

  <mdb-step [name]="'Step 2'">
    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon2" class="form-control" />
      <label mdbLabel class="form-label" for="icon2">Step 2</label>
    </mdb-form-control>
  </mdb-step>

  <mdb-step [name]="'Step 3'">
    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon3" class="form-control" />
      <label mdbLabel class="form-label" for="icon3">Step 3</label>
    </mdb-form-control>
  </mdb-step>
</mdb-stepper>

Custom icons

If you want to use an icon instead of a step number you can do it by placing icon HTML code inside ng-template with mdbStepIcon directive.

  • step1
  • step2
  • step3 
<mdb-stepper>
  <mdb-step [name]="'Step 1'">
    <ng-template mdbStepIcon>
      <i class="fas fa-user"></i>
    </ng-template>

    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon1" class="form-control" />
      <label mdbLabel class="form-label" for="icon1">Step 1</label>
    </mdb-form-control>
  </mdb-step>

  <mdb-step [name]="'Step 2'">
    <ng-template mdbStepIcon>
      <i class="fas fa-envelope"></i>
    </ng-template>

    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon2" class="form-control" />
      <label mdbLabel class="form-label" for="icon2">Step 2</label>
    </mdb-form-control>
  </mdb-step>

  <mdb-step [name]="'Step 3'">
    <ng-template mdbStepIcon>
      <span
        class="spinner-border spinner-border-sm"
        role="status"
        aria-hidden="true"
      ></span>
    </ng-template>

    <mdb-form-control>
      <input mdbInput mdbValidate type="text" id="icon3" class="form-control" />
      <label mdbLabel class="form-label" for="icon3">Step 3</label>
    </mdb-form-control>
  </mdb-step>
</mdb-stepper>

Form wizard

An example of so-called "Form wizard" with multiple inputs on each step.

  • 1 step1
    invalid
    invalid
  • 2 step2
  • 3 step3 
<mdb-stepper #stepper [linear]="true">
  <mdb-step [stepForm]="firstFormGroup" [name]="'Step 1'">
    <form [formGroup]="firstFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="first-name"
          class="form-control mb-4"
          formControlName="firstName"
        />
        <label mdbLabel class="form-label" for="first-name"
          >First name <span class="text-muted">(required)</span></label
        >
      </mdb-form-control>

      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="last-name"
          class="form-control mb-4"
          formControlName="lastName"
        />
        <label mdbLabel class="form-label" for="last-name"
          >Last name <span class="text-muted">(required)</span></label
        >
      </mdb-form-control>

      <mdb-form-control>
        <input
          mdbInput
          type="text"
          id="nickname"
          class="form-control mb-4"
          formControlName="nickname"
        />
        <label mdbLabel class="form-label" for="nickname"
          >Nickname <small class="text-muted">(optional)</small></label
        >
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [stepForm]="secondFormGroup" [name]="'Step 2'">
    <form [formGroup]="secondFormGroup">
      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="company-name"
          class="form-control mb-4"
          formControlName="companyName"
        />
        <label mdbLabel class="form-label" for="company-name"
          >Company name <span class="text-muted">(required)</span></label
        >
      </mdb-form-control>

      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="address"
          class="form-control mb-4"
          formControlName="address"
        />
        <label mdbLabel class="form-label" for="address"
          >Address <span class="text-muted">(required)</span></label
        >
      </mdb-form-control>

      <mdb-form-control>
        <input
          mdbInput
          mdbValidate
          type="text"
          id="email"
          class="form-control mb-4"
          formControlName="email"
        />
        <label mdbLabel class="form-label" for="email"
          >Email <span class="text-muted">(required)</span></label
        >
      </mdb-form-control>

      <mdb-form-control>
        <input
          mdbInput
          type="text"
          id="phone"
          class="form-control mb-4"
          formControlName="phone"
        />
        <label mdbLabel class="form-label" for="phone"
          >Phone <small class="text-muted">(optional)</small></label
        >
      </mdb-form-control>
    </form>
  </mdb-step>
  <mdb-step [name]="'Step 3'">
    <mdb-form-control class="mb-4">
      <textarea mdbInput class="form-control" id="additional-info" rows="4"></textarea>
      <label mdbLabel class="form-label" for="additional-info"
        >Additional information</label
      >
    </mdb-form-control>

    <div class="form-check d-flex justify-content-center mb-4">
      <input
        mdbCheckbox
        class="form-check-input me-2"
        type="checkbox"
        value=""
        id="crate-account"
        [checked]="true"
      />
      <label class="form-check-label" for="create-account"> Create an account? </label>
    </div>

    <button type="submit" class="btn btn-success btn-block mb-4">Place order</button>
  </mdb-step>
</mdb-stepper>

<!-- Buttons -->
<div class="d-flex justify-content-center px-3">
  <button
    id="form-example-prev-step"
    class="btn btn-primary w-100 me-2"
    (click)="stepper.previous()"
  >
    Previous step
  </button>
  <button
    id="form-example-next-step"
    class="btn btn-primary w-100"
    (click)="stepper.next()"
  >
    Next step
  </button>
</div>
<!-- Buttons -->
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor() {
    this.firstFormGroup = new FormGroup({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
      nickname: new FormControl(''),
    });

    this.secondFormGroup = new FormGroup({
      companyName: new FormControl('', [Validators.required]),
      address: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email]),
      phone: new FormControl(''),
    });
  }
}

Toggle to vertical or mobile on smaller screens

Change the view from horizontal to vertical or mobile with smaller screens using code below.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3 
<mdb-stepper [orientation]="orientation" [mobile]="isMobile">
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component, OnInit, NgZone } from '@angular/core';
import { MdbStepperOrientation } from 'mdb-angular-ui-kit/stepper';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];

  verticalBreakpoint = 768;
  mobileBreakpoint = 400;

  orientation: MdbStepperOrientation =
    window.innerWidth <= this.verticalBreakpoint &&
    window.innerWidth > this.mobileBreakpoint
      ? 'vertical'
      : 'horizontal';
  isMobile = window.innerWidth <= this.mobileBreakpoint ? true : false;

  constructor(private _ngZone: NgZone) {}

  ngOnInit(): void {
    this._ngZone.runOutsideAngular(() => {
      fromEvent(window, 'resize').subscribe(() => {
        if (window.innerWidth <= this.verticalBreakpoint) {
          this._ngZone.run(() => {
            this.orientation = 'vertical';
          });
        }
        if (window.innerWidth <= this.mobileBreakpoint) {
          this._ngZone.run(() => {
            this.orientation = 'horizontal';
            this.isMobile = true;
          });
        }
        if (window.innerWidth > this.verticalBreakpoint) {
          this._ngZone.run(() => {
            this.orientation = 'horizontal';
            this.isMobile = false;
          });
        }
      });
    });
  }
}

Stepper - API

Import

import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';
import { ReactiveFormsModule } from '@angular/forms';

…
@NgModule ({
  ...
  imports: [MdbStepperModule, ReactiveFormsModule],
  ...
})

Inputs

MdbStepperComponent

Name Type Default Description
linear boolean false Changes stepper mode to linear
markAsCompleted boolean true Marks previous step as completed after switching to next step
mobile boolean false Changes stepper view to mobile

MdbStepComponent

Name Type Default Description
editable boolean true Adds posibility to enable or disable step edition
name string - Changes step header name
optional boolean false Changes step to optional (works in linear mode)
stepForm FromGroup - Form group that will be validated in linear mode

Outputs

Name Type Description
stepChange EventEmitter<MdbStepChangeEvent> Event fired on active step change 
<mdb-stepper (stepChange)="onStepChange($event)">
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component } from '@angular/core';
import { MdbStepChangeEvent } from 'mdb-angular-ui-kit/stepper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];

  onStepChange(event: MdbStepChangeEvent) {
    console.log(event);
  }
}

Methods

Name Description Example
next Go to next step stepper.next()
newActiveStep Go to step with specific index stepper.newActiveStep(2)
previous Go to previous step stepper.previous() 
<div class="mb-3">
  <button id="prev-step" class="btn btn-primary" (click)="goToPreviousStep()">
    Previous
  </button>
  <button id="next-step" class="btn btn-primary" (click)="goToNextStep()">Next</button>
</div>
<mdb-stepper #stepper>
  <mdb-step *ngFor="let step of steps" [name]="step.name">
    {{ step.content }}
  </mdb-step>
</mdb-stepper>
import { Component, ViewChild } from '@angular/core';
import { MdbStepperComponent } from 'mdb-angular-ui-kit/stepper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('stepper') stepper!: MdbStepperComponent;

  steps = [
    {
      name: 'Step 1',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
    },
    {
      name: 'Step 2',
      content:
        'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat',
    },
    {
      name: 'Step 3',
      content:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    },
  ];

  goToNextStep(): void {
    this.stepper.next();
  }

  goToPreviousStep(): void {
    this.stepper.previous();
  }
}

Advanced types

MdbStepChangeEvent

interface MdbStepChangeEvent {
  activeStep: MdbStepComponent;
  activeStepIndex: number;
  previousStep: MdbStepComponent;
  previousStepIndex: number;
}

CSS variables

As part of MDB’s evolving CSS variables approach, stepper now use local CSS variables on .stepper for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .steps
--#{$prefix}steps-transition: #{$steps-transition};

// .steps-step
--#{$prefix}steps-step-after-left: #{$steps-step-after-left};
--#{$prefix}steps-step-after-width: #{$steps-step-after-width};
--#{$prefix}steps-step-after-margin-top: #{$steps-step-after-margin-top};
--#{$prefix}steps-step-after-bg: #{$steps-step-after-bg};

// .steps-content
--#{$prefix}steps-content-padding-y: #{$steps-content-padding-y};

// .steps-head-vertical
--#{$prefix}steps-head-vertical-padding-top: #{$steps-head-vertical-padding-top};
--#{$prefix}steps-head-vertical-padding-x: #{$steps-head-vertical-padding-x};

// .steps-head-icon-vertical
--#{$prefix}steps-head-icon-vertical-margin-right: #{$steps-head-icon-vertical-margin-right};

// .steps-head
--#{$prefix}steps-head-line-height: #{$steps-head-line-height};
--#{$prefix}steps-head-hover-bgc: #{$steps-head-hover-bgc};

// .steps-head-text
--#{$prefix}steps-head-text-color: #{$steps-head-text-color};
--#{$prefix}steps-head-text-after-font-size: #{$steps-head-text-after-font-size};

// .steps-head-icon
--#{$prefix}steps-head-icon-font-size: #{$steps-head-icon-font-size};
--#{$prefix}steps-head-icon-width: #{$steps-head-icon-width};
--#{$prefix}steps-head-icon-height: #{$steps-head-icon-height};
--#{$prefix}steps-head-icon-font-weight: #{$steps-head-icon-font-weight};

// .steps-active-head-text
--#{$prefix}steps-active-head-text-font-weight: #{$steps-active-head-text-font-weight};

// .stepper
--#{$prefix}stepper-padding-x: #{$stepper-padding-x};
--#{$prefix}stepper-step-height: #{$stepper-step-height};
--#{$prefix}stepper-step-head-padding-left: #{$stepper-step-head-padding-left};
--#{$prefix}stepper-step-head-padding-right: #{$stepper-step-head-padding-right};
--#{$prefix}stepper-step-head-height: #{$stepper-step-head-height};
--#{$prefix}stepper-step-head-bg: #{$stepper-step-head-bg};
--#{$prefix}stepper-step-head-margin-right: #{$stepper-step-head-margin-right};
--#{$prefix}stepper-step-head-margin-left: #{$stepper-step-head-margin-left};
--#{$prefix}stepper-head-icon-margin-y: #{$stepper-head-icon-margin-y};
--#{$prefix}stepper-head-icon-margin-right: #{$stepper-head-icon-margin-right};
--#{$prefix}stepper-vertical-step-top: #{$stepper-vertical-step-top};
--#{$prefix}stepper-vertical-step-height: #{$stepper-vertical-step-height};
--#{$prefix}stepper-vertical-content-padding-left: #{$stepper-vertical-content-padding-left};
--#{$prefix}stepper-vertical-content-transition: #{$stepper-vertical-content-transition};
--#{$prefix}stepper-vertical-head-padding-bottom: #{$stepper-vertical-head-padding-bottom};
--#{$prefix}stepper-mobile-step-margin-y: #{$stepper-mobile-step-margin-y};
--#{$prefix}stepper-mobile-step-head-padding-x: #{$stepper-mobile-step-head-padding-x};
--#{$prefix}stepper-mobile-head-icon-height: #{$stepper-mobile-head-icon-height};
--#{$prefix}stepper-mobile-head-icon-width: #{$stepper-mobile-head-icon-width};
--#{$prefix}stepper-mobile-content-top: #{$stepper-mobile-content-top};
--#{$prefix}stepper-mobile-active-head-icon-bg: #{$stepper-mobile-active-head-icon-bg};
--#{$prefix}stepper-mobile-completed-head-icon-bg: #{$stepper-mobile-completed-head-icon-bg};
--#{$prefix}stepper-head-icon-bg: #{$stepper-head-icon-bg};
--#{$prefix}stepper-head-icon-color: #{$stepper-head-icon-color};
--#{$prefix}stepper-completed-head-icon-bg: #{$stepper-completed-head-icon-bg};
--#{$prefix}stepper-completed-head-icon-color: #{$stepper-completed-head-icon-color};
--#{$prefix}stepper-active-head-icon-bg: #{$stepper-active-head-icon-bg};
--#{$prefix}stepper-active-head-icon-color: #{$stepper-active-head-icon-color};
--#{$prefix}stepper-invalid-head-icon-bg: #{$stepper-invalid-head-icon-bg};
--#{$prefix}stepper-invalid-head-icon-color: #{$stepper-invalid-head-icon-color};
--#{$prefix}stepper-disabled-head-color: #{$stepper-disabled-head-color};
--#{$prefix}stepper-disabled-head-icon-bg: #{$stepper-disabled-head-icon-bg};
--#{$prefix}stepper-disabled-head-icon-color: #{$stepper-disabled-head-icon-color};
--#{$prefix}stepper-mobile-head-padding-y: #{$stepper-mobile-head-padding-y};
--#{$prefix}stepper-mobile-head-padding-x: #{$stepper-mobile-head-padding-x};
--#{$prefix}stepper-mobile-footer-height: #{$stepper-mobile-footer-height};
--#{$prefix}stepper-back-btn-i-margin-right: #{$stepper-back-btn-i-margin-right};
--#{$prefix}stepper-next-btn-i-margin-left: #{$stepper-next-btn-i-margin-left};
--#{$prefix}stepper-mobile-progress-bar-height: #{$stepper-mobile-progress-bar-height};
--#{$prefix}stepper-mobile-progress-height: #{$stepper-mobile-progress-height};
--#{$prefix}stepper-mobile-progress-background-color: #{$stepper-mobile-progress-background-color};

SCSS variables

// Steps
$steps-transition: height 0.2s ease-in-out;

$steps-step-after-left: 2.45rem;
$steps-step-after-width: 1px;
$steps-step-after-margin-top: 0.5rem;
$steps-step-after-bg: #dfdfdf;

$steps-content-padding-y: 1.5rem;

$steps-head-vertical-padding-top: 1.5rem;
$steps-head-vertical-padding-x: 1.5rem;

$steps-head-icon-vertical-margin-right: 0.75rem;

$steps-head-line-height: 1.3;
$steps-head-hover-bgc: rgba(0, 0, 0, 0.025);

$steps-head-text-color: $text-muted;
$steps-head-text-after-font-size: 0.8rem;

$steps-head-icon-font-size: 0.875rem;
$steps-head-icon-width: 1.938rem;
$steps-head-icon-height: 1.938rem;
$steps-head-icon-font-weight: 500;

$steps-active-head-text-font-weight: 500;

// Stepper
$stepper-padding-x: 1rem;

$stepper-step-height: 4.5rem;

$stepper-step-head-padding-left: 1.5rem;
$stepper-step-head-padding-right: 1.5rem;
$stepper-step-head-height: 1px;
$stepper-step-head-bg: rgba(0, 0, 0, 0.1);
$stepper-step-head-margin-right: 0.5rem;
$stepper-step-head-margin-left: 0.5rem;

$stepper-head-icon-margin-y: 1.5rem;
$stepper-head-icon-margin-right: 0.5rem;

$stepper-vertical-step-top: 3.25rem;
$stepper-vertical-step-height: calc(100% - 2.45rem);
$stepper-vertical-content-padding-left: 3.75rem;
$stepper-vertical-content-transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out,
  margin-bottom 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
$stepper-vertical-head-padding-bottom: 1.5rem;

$stepper-mobile-step-margin-y: 1rem;
$stepper-mobile-step-head-padding-x: 0.25rem;
$stepper-mobile-head-icon-height: 0.5rem;
$stepper-mobile-head-icon-width: 0.5rem;
$stepper-mobile-content-top: 2.56rem;
$stepper-mobile-active-head-icon-bg: rgb(55, 111, 200);
$stepper-mobile-completed-head-icon-bg: rgb(19, 150, 71);

$stepper-head-icon-bg: rgb(235, 237, 239);
$stepper-head-icon-color: rgb(64, 70, 79);

$stepper-completed-head-icon-bg: rgb(214, 240, 224);
$stepper-completed-head-icon-color: rgb(13, 104, 50);

$stepper-active-head-icon-bg: rgb(223, 231, 246);
$stepper-active-head-icon-color: rgb(44, 88, 160);

$stepper-invalid-head-icon-bg: rgb(249, 225, 229);
$stepper-invalid-head-icon-color: rgb(175, 35, 58);

$stepper-disabled-head-color: #808080;
$stepper-disabled-head-icon-bg: #e6e6e6;
$stepper-disabled-head-icon-color: #808080;

$stepper-mobile-head-padding-y: 0.5rem;
$stepper-mobile-head-padding-x: 1rem;
$stepper-mobile-footer-height: 2.5rem;

$stepper-back-btn-i-margin-right: 0.5rem;
$stepper-next-btn-i-margin-left: 0.5rem;

$stepper-mobile-progress-bar-height: 0.3rem;
$stepper-mobile-progress-height: 0.3rem;
$stepper-mobile-progress-background-color: $gray-300;