Vue Bootstrap Stepper

Vue Stepper - Bootstrap 4 & Material Design

Vue Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.

This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Stepper can be aligned vertically as well as horizontally.

Examples of Vue Bootstrap steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap Vue stepper examples:

Registration form with steps MDB Pro component

The step indicator is generated by the component, basing on the name and icon props passed in with individual steps. Additionally, the stepper accepts following props:

  • buttons - Boolean - controls whether to generate navigational buttons below;
  • vertical - Boolean - whether the generated stepper should be oriented vertically;
  • within - Boolean - decides if the generated stepper should be in it's smaller, less dominant form;
  • simpleH / simpleV - Boolean - turns stepper into a purely representational component open for custom logic. Last character decides its orientation;
  • nextBtn - String - what should be written on the navigational button turning panes forward. Default value: "next"; the generated stepper should be oriented vertically;
  • prevBtn - String - what should be written on the navigational button turning panes bachwards. Default value: "previous";
  • submitBtn - String - what should be written on the button at the last pane. Default value: "submit";
  • submitFunction - Function - the callback for form submission;

To have it work properly, one must pass slot="content" attrubute to the steps , so our content lays where it is supposed to within the stepper.

Registration form

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!


        <template>
          <mdb-stepper buttons>
            <mdb-step name="Basic Information"
                :far="true"
                icon="folder-open"
                slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
              <mdb-input label="Email"/>
              <mdb-input label="Username"/>
              <mdb-input label="Password"/>
              <mdb-input label="Repeat Password"/>
            </mdb-step>
            <mdb-step name="Personal Data"
                  icon="pencil-alt"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
              <mdb-input label="First Name"/>
              <mdb-input label="Second Name"/>
              <mdb-input label="Surname"/>
              <mdb-textarea label="Address"/>
            </mdb-step>
            <mdb-step name="Terms and Conditions"
                  :far="true"
                  icon="image"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
              <mdb-input type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
              <mdb-input type="checkbox" id="checkbox2" label="I want to receive newsletter" />
            </mdb-step>
            <mdb-step name="Finish"
                  icon="check"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
              <h2 class="text-center font-weight-bold my-4">Registration completed!</h2>
            </mdb-step>
          </mdb-stepper>
        </template>
      

        <script>
          import { mdbStepper, mdbStep, mdbInput } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbStepper,
              mdbStep,
              mdbInput
            }
          }
        </script>

Vertical registration form steps MDB Pro component

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!


        <template>
          <mdb-stepper vertical buttons>
            <mdb-step name="Basic Information"
                  :far="true"
                  icon="folder-open"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
              <mdb-input label="Email"/>
              <mdb-input label="Username"/>
              <mdb-input label="Password"/>
              <mdb-input label="Repeat Password"/>
            </mdb-step>
            <mdb-step name="Personal Data"
                  icon="pencil-alt"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
              <mdb-input label="First Name"/>
              <mdb-input label="Second Name"/>
              <mdb-input label="Surname"/>
              <mdb-textarea label="Address"/>
            </mdb-step>
            <mdb-step name="Terms and Conditions"
                  :far="true"
                  icon="heart"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
              <mdb-input type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
              <mdb-input type="checkbox" id="checkbox2" label="I want to receive newsletter" />
            </mdb-step>
            <mdb-step name="Finish"
                  icon="check"
                  slot="content">
              <h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
              <h2 class="text-center font-weight-bold my-4">Registration completed!</h2>
            </mdb-step>
          </mdb-stepper>
        </template>
      

        <script>
          import { mdbStepper, mdbStep, mdbInput, mdbTextarea } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbStepper,
              mdbStep,
              mdbInput,
              mdbtextarea
            }
          }
        </script>

Steps within form MDB Pro component

Steps form example

1

Step 1

2

Step 2

3

Step 3

Step 1

Step 2

Step 3


        <template>
          <mdb-card>
            <mdb-card-body>
              <h2 class="text-center font-weight-bold pt-4 pb-5"><strong>Steps form example</strong></h2>
              <mdb-stepper within buttons>
                <mdb-step name="Step 1" slot="content">
                  <h3 class="font-weight-bold pl-0 my-4"><strong>Step 1</strong></h3>
                  <mdb-input label="First Name"/>
                  <mdb-input label="Second Name"/>
                  <mdb-textarea label="Address"/>
                </mdb-step>
                <mdb-step name="Step 2" slot="content">
                  <h3 class="font-weight-bold pl-0 my-4"><strong>Step 2</strong></h3>
                  <mdb-input label="Company Name"/>
                  <mdb-input label="Company Addresws"/>
                  <mdb-textarea label="Address"/>
                </mdb-step>
                <mdb-step name="Step 3" slot="content">
                  <h3 class="font-weight-bold pl-0 my-4"><strong>Step 3</strong></h3>
                </mdb-step>
              </mdb-stepper>
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import { mdbStepper, mdbStep, mdbInput, mdbCard, mdbCardBody } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbStepper,
              mdbStep,
              mdbInput,
              mdbCard,
              mdbCardBody
            }
          }
        </script>

Horizontal steppers MDB Pro component

This form of the stepper is a simple ul-based wrapper, open for custom interactions to be designed. Below is a suggested take on the implementation.


        <template>
          <mdb-stepper simpleH>
            <li class="completed" slot="simple">
              <a href="#!">
                <span class="circle">1</span>
                <span class="label">First step</span>
              </a>
            </li>
            <li class="active" slot="simple">
              <a href="#!">
                <span class="circle">2</span>
                <span class="label">Second step</span>
              </a>
            </li>
            <li class="warning" slot="simple">
              <a href="#!">
                <span class="circle"><i class="fas fa-exclamation"></i></span>
                <span class="label">Third step</span>
              </a>
            </li>
          </mdb-stepper>
        </template>
      

        <script>
          import { mdbStepper } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbStepper
            }
          }
        </script>

Vertical steppers MDB Pro component

  • 1 First step
  • 2 Second step

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.

    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.

  • Third step
  • 4 Fourth step 

        <template>
          <mdb-stepper simpleV>
            <li class="completed" slot="simple">
              <a>
                <span class="circle">1</span>
                <span class="label">First step</span>
              </a>
            </li>
            <li class="active" slot="simple">
              <a>
                <span class="circle">2</span>
                <span class="label">Second step</span>
              </a>
                <div class="step-content grey lighten-3">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.</p>
                  <p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.</p>
              </div>
            </li>
            <li class="warning" slot="simple">
              <a>
                <span class="circle"><i class="fas fa-exclamation"></i></span>
                <span class="label">Third step</span>
              </a>
            </li>
            <li slot="simple">
              <a>
                <span class="circle">4</span>
                <span class="label">Fourth step</span>
              </a>
            </li>
          </mdb-stepper>
        </template>
      

        <script>
          import { mdbStepper } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbStepper
            }
          }
        </script>

Stepper form with validation MDB Pro component 


        <template>
          <mdb-card class="indigo lighten-5 pb-5">
            <mdb-card-body>
              <mdb-stepper
                class="pt-5"
                buttons
                validation
                :validatedSteps="validatedSteps"
                @validate="validate"
              >
                <mdb-step name="Personal Information" slot="content" icon="user" :number="1">
                  <h3 class="font-weight-bold pt-3 pl-0 my-4">
                    <mdb-card-title>Personal Information</mdb-card-title>
                  </h3>
                  <mdb-input required label="First Name" v-model="form[0].name" />
                  <mdb-input required label="Second Name" v-model="form[0].surname" />
                  <mdb-input required label="Address" v-model="form[0].address" />
                </mdb-step>
                <mdb-step name="Company Information" slot="content" icon="pen" :number="2">
                  <h3 class="font-weight-bold pt-3 pl-0 my-4">
                    <mdb-card-title>Company Information</mdb-card-title>
                  </h3>
                  <mdb-input required label="Company Name" v-model="form[1].company" />
                  <mdb-input required label="Company Address" v-model="form[1].address" />
                </mdb-step>
                <mdb-step name="Terms and conditions" slot="content" icon="check" :number="3">
                  <h3 class="font-weight-bold pt-3 pl-0 my-4">
                    <mdb-card-title>Terms and conditions</mdb-card-title>
                  </h3>
                  <mdb-input
                    type="checkbox"
                    id="checkbox3"
                    required
                    v-model="form[2].condition"
                    label="I agree to the terms and conditions"
                  />
                  <mdb-input type="checkbox" id="checkbox4" label="I want to receive newsletter" />
                </mdb-step>
              </mdb-stepper>
            </mdb-card-body>
          </mdb-card>
        </template>
      

        <script>
          import {
            mdbStepper,
            mdbStep,
            mdbInput,
            mdbCard,
            mdbCardBody,
            mdbCardTitle
          } from "mdbvue";
          
          export default {
            components: {
              mdbStepper,
              mdbStep,
              mdbInput,
              mdbCard,
              mdbCardBody,
              mdbCardTitle
            },
            data() {
              return {
                validatedSteps: {},
                form: [{
                  name: '',
                  surname: '',
                  address: ''
                },
                {
                  company: '',
                  address: ''
                },
                {
                  condition: false
                }
                ]
              };
            },
            methods: {
              checkForm(form) {
                return Object.keys(form).length === Object.keys(form)
                  .filter(key => form[key].length > 0).length;
              },
              validate(e) {
                if (e === 3) {
                  this.validatedSteps[e] = this.form[e - 1].condition;
                }
                else if (this.checkForm(this.form[e - 1])) {
                  this.validatedSteps[e] = true;
                }
                else {
                  this.validatedSteps[e] = false;
                }
              }
            }
          };
          </script>

Stepper - API

In this section you will find advanced information about the Stepper component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement


import { mdbStepper, mdbStep } from 'mdbvue';

API Reference: Properties

Name Type Default Description Example
buttons Boolean false Controls whether to generate navigational buttons below <mdb-stepper buttons />
vertical Boolean false Controls whether the generated stepper should be oriented vertically <mdb-stepper vertical />
within Boolean false Decides if the generated stepper should be in it's smaller, less dominant form <mdb-stepper within />
simpleH / simpleV Boolean false Turns stepper into a purely representational component open for custom logic. Last character decides its orientation <mdb-stepper simpleH />
nextBtn String What should be written on the navigational button turning panes forward. Default value: "next"; the generated stepper should be oriented vertically <mdb-stepper nextBtn="..." />
prevBtn String What should be written on the navigational button turning panes bachwards. Default value: "previous" <mdb-stepper prevBtn="..." />
submitBtn String What should be written on the button at the last pane. Default value: "submit" <mdb-stepper submitBtn="..." />
submitFunction Function The callback for form submission <mdb-stepper submitFunction="..." />
validatedSteps Object Key-value pairs where key is the index of validated step and value is a boolean <mdb-stepper :validatedSteps="validatedSteps" />

API Reference: Events

Event Description Example
@validate Emits an activeStep and allows to perform validation on this step. <mdb-stepper validation :validatedSteps="validatedSteps" @validate="validate" />
@changeStep Emits the index of the next step. <mdb-stepper @changeStep="handler" />