Stepper

Angular Bootstrap 5 Stepper / Wizard component

Responsive Angular stepper built with Bootstrap 5. 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

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    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
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    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
    invalid
  • 3 step3
    invalid

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
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    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.

Mobile stepper

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

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    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.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 4 step4
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 4 step4
    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

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 mdbStepperIcon directive.

  • step1
  • step2
  • step3

Form wizard

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

  • 1 step1
  • 2 step2
  • 3 step3

Toggle to vertical or mobile on smaller screens

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Stepper - API


Import


        import { MdbStepperModule } from 'mdb-angular-ui-kit/stepper';
        …
        @NgModule ({
          ...
          imports: [MdbStepperModule],
          ...
        })
      

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-stepper',
              templateUrl: './stepper.component.html',
              styleUrls: ['./stepper.component.scss'],
            })
            export class StepperComponent {
              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 } from '@angular/core';
            import { MdbStepperComponent } from 'mdb-angular-ui-kit/stepper';

            @Component({
              selector: 'app-stepper',
              templateUrl: './stepper.component.html',
              styleUrls: ['./stepper.component.scss'],
            })
            export class StepperComponent {
              @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();
              }
            }