Stepper

Vue Stepper / Wizard component

Responsive stepper built with Bootstrap 5 and Vue 3. 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 stepper with MDBSteppercomponent

  • 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 
<template>
  <MDBStepper>
    <MDBStepperStep active>
      <MDBStepperHead icon="1">
        Step 1
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="2">
        Step 2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="3">
        Step 3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
</script>

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 
<template>
  <div class="w-100">
    <div class="mb-3">
      <MDBBtn
        id="prev-step"
        color="primary"
        @click="btnStepper?.prevStep()"
      >
        prev
      </MDBBtn>
      <MDBBtn
        id="step-1"
        color="primary"
        @click="btnStepper?.changeStep(1)"
      >
        step1
      </MDBBtn>
      <MDBBtn
        id="step-2"
        color="primary"
        @click="btnStepper?.changeStep(2)"
      >
        step2
      </MDBBtn>
      <MDBBtn
        id="step-3"
        color="primary"
        @click="btnStepper?.changeStep(3)"
      >
        step3
      </MDBBtn>
      <MDBBtn
        id="next-step"
        color="primary"
        @click="btnStepper?.nextStep()"
      >
        next
      </MDBBtn>
    </div>
    <div>
      <MDBStepper ref="btnStepper">
        <MDBStepperStep active>
          <MDBStepperHead icon="1">
            Step 1
          </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="2">
            Step 2
          </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
              ex ea commodo consequat
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="3">
            Step 3
          </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
      </MDBStepper>
    </div>
  </div>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBBtn
    },
    setup(){
      const btnStepper = ref(null);

      return {
        btnStepper,
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const btnStepper = ref<InstanceType<typeof MDBStepper> | null>(null);
</script>

Linear stepper

If you want to use basic validation before proceeding to the next step you can set linear property

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
<template>
  <MDBStepper linear>
    <MDBStepperForm>
      <MDBStepperStep active>
        <MDBStepperHead icon="1">
          Step 1
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 1"
            v-model="stepperInput1"
            invalidFeedback="Invalid"
            required
          />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="2">
          Step 2
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 2"
            v-model="stepperInput2"
            invalidFeedback="Invalid"
            required
          />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="3">
          Step 3
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 3"
            v-model="stepperInput3"
            invalidFeedback="Invalid"
            required
          />
          <MDBBtn color="primary" type="submit">Submit</MDBBtn>
        </MDBStepperContent>
      </MDBStepperStep>
    </MDBStepperForm>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBStepperForm,
      MDBInput,
      MDBBtn
    },
    setup(){
      const stepperInput1 = ref("");
      const stepperInput2 = ref("");
      const stepperInput3 = ref("");
      return {
        stepperInput1,
        stepperInput2,
        stepperInput3
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperInput1 = ref("");
  const stepperInput2 = ref("");
  const stepperInput3 = ref("");
</script>

No editable stepper

You can set noEditable property to prevent you from editing the completed step again

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
<template>
  <MDBStepper noEditable>
    <MDBStepperForm>
      <MDBStepperStep active>
        <MDBStepperHead icon="1">
          Step 1
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 1" v-model="stepperInput4" />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="2">
          Step 2
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 2" v-model="stepperInput5" />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="3">
          Step 3
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 3" v-model="stepperInput6" />
        </MDBStepperContent>
      </MDBStepperStep>
    </MDBStepperForm>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBStepperForm,
      MDBInput
    },
    setup(){
      const stepperInput4 = ref("");
      const stepperInput5 = ref("");
      const stepperInput6 = ref("");
      return {
        stepperInput4,
        stepperInput5,
        stepperInput6
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperInput4 = ref("");
  const stepperInput5 = ref("");
  const stepperInput6 = ref("");
</script>

Vertical stepper

Set vertical property to use the vertical view

  • 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. 
<template>
  <MDBStepper vertical>
    <MDBStepperStep active>
      <MDBStepperHead icon="1">
        step1
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="2">
        step2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="3">
        step3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
</script>

Mobile stepper

Set mobile property to use mobile view

    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 
<template>
  <MDBStepper mobile>
    <MDBStepperStep active>
      <MDBStepperHead icon="1">
        step1
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="2">
        step2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="3">
        step3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
</script>

Mobile stepper progress bar

If the 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 mobile mobileProgress properties

    step 1 of 12
  • 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
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3 
<template>
  <MDBStepper mobile mobileProgress>
    <MDBStepperStep active>
      <MDBStepperHead icon="1">
        step1
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="2">
        step2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="3">
        step3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="4">
        step4
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="5">
        step5
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="6">
        step6
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="7">
        step7
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="8">
        step8
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="9">
        step9
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="10">
        step10
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="11">
        step11
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep active>
      <MDBStepperHead icon="12">
        step12
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
</script>

Optional step

You can mark a step as optional by adding optional to it

  • 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
  • 3 step3 
<template>
  <MDBStepper>
    <MDBStepperStep active>
      <MDBStepperHead icon="1">
        step1
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep optional>
      <MDBStepperHead icon="2">
        step2
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead icon="3">
        step3
      </MDBStepperHead>
      <MDBStepperContent>
        <span>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
          Suspendisse a pellentesque dui, non felis. Maecenas malesuada
          elit lectus felis, malesuada ultricies.
        </span>
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent } from "mdb-vue-ui-kit";
</script>

Custom icons

if you want to use an icon instead of a step number you can do it by placing it inside #icon slot

  • step1
    invalid
  • step2
  • step3 
<template>
  <MDBStepper>
    <MDBStepperForm>
      <MDBStepperStep active>
        <MDBStepperHead>
          <template #icon>
            <MDBIcon icon="user" />
          </template>
          Step 1
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 1" v-model="stepperInput7" />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead>
          <template #icon>
            <MDBIcon icon="envelope" />
          </template>
          Step 2
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 2" v-model="stepperInput8" />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead>
          <template #icon>
            <MDBSpinner size="sm"></MDBSpinner>
          </template>
          Step 3
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput label="Step 3" v-model="stepperInput9" />
        </MDBStepperContent>
      </MDBStepperStep>
    </MDBStepperForm>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBIcon, MDBSpinner } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBStepperForm,
      MDBInput,
      MDBIcon,
      MDBSpinner
    },
    setup(){
      const stepperInput7 = ref("");
      const stepperInput8 = ref("");
      const stepperInput9 = ref("");
      return {
        stepperInput7,
        stepperInput8,
        stepperInput9
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBIcon, MDBSpinner } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperInput7 = ref("");
  const stepperInput8 = ref("");
  const stepperInput9 = ref("");
</script>

Form wizard

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

  • 1 step1
    invalid
    invalid
  • 2 step2
  • 3 step3 
<template>
  <div>
    <MDBStepper linear ref="formWizardRef">
      <MDBStepperForm>
        <MDBStepperStep active>
          <MDBStepperHead icon="1">
            Step 1
          </MDBStepperHead>
          <MDBStepperContent>
            <MDBInput
              label="First Name (required)"
              v-model="stepperInput10"
              invalidFeedback="Invalid"
              required
              wrapperClass="mb-4"
            />
            <MDBInput
              label="Last Name (required)"
              v-model="stepperInput11"
              invalidFeedback="Invalid"
              required
              wrapperClass="mb-4"
            />
            <MDBInput
              label="Nickname (optional)"
              v-model="stepperInput12"
              wrapperClass="mb-4"
            />
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="2">
            Step 2
          </MDBStepperHead>
          <MDBStepperContent>
            <MDBInput
              label="Company Name (required)"
              v-model="stepperInput13"
              invalidFeedback="Invalid"
              required
              wrapperClass="mb-4"
            />
            <MDBInput
              label="Address (required)"
              v-model="stepperInput14"
              invalidFeedback="Invalid"
              required
              wrapperClass="mb-4"
            />
            <MDBInput
              label="Email (required)"
              type="email"
              v-model="stepperInput15"
              invalidFeedback="Invalid"
              required
              wrapperClass="mb-4"
            />
            <MDBInput
              label="Phone (optional)"
              type="number"
              v-model="stepperInput16"
              wrapperClass="mb-4"
            />
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="3">
            Step 3
          </MDBStepperHead>
          <MDBStepperContent>
            <MDBTextarea
              label="Additional information"
              rows="4"
              v-model="textarea1"
              wrapperClass="mb-4"
            />
            <MDBCheckbox
              label="Create an account?"
              v-model="checkbox1"
              wrapperClass="d-flex justify-content-center mb-4"
            />
            <MDBBtn color="success" block type="submit">
              Place Order
            </MDBBtn>
          </MDBStepperContent>
        </MDBStepperStep>
      </MDBStepperForm>
    </MDBStepper>
    <div class="d-flex justify-content-center px-3">
      <MDBBtn
        color="primary"
        class="w-100 me-2"
        @click="formWizardRef?.prevStep()"
      >
        Previous step
      </MDBBtn>
      <MDBBtn
        color="primary"
        class="w-100"
        @click="formWizardRef?.nextStep()"
      >
        Next step
      </MDBBtn>
    </div>
  </div>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBTextarea, MDBCheckbox, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBStepperForm,
      MDBInput,
      MDBTextarea,
      MDBCheckbox, MDBBtn
    },
    setup(){
      const formWizardRef = ref(null);

      const stepperInput10 = ref("");
      const stepperInput11 = ref("");
      const stepperInput12 = ref("");
      const stepperInput13 = ref("");
      const stepperInput14 = ref("");
      const stepperInput15 = ref("");
      const stepperInput16 = ref("");
      const textarea1 = ref("");
      const checkbox1 = ref(true);
      return {
        formWizardRef,
        stepperInput10,
        stepperInput11,
        stepperInput12,
        stepperInput13,
        stepperInput14,
        stepperInput15,
        stepperInput16,
        textarea1,
        checkbox1
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput, MDBTextarea, MDBCheckbox, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const formWizardRef = ref<InstanceType<typeof MDBStepper> | null>(null);

  const stepperInput10 = ref("");
  const stepperInput11 = ref("");
  const stepperInput12 = ref("");
  const stepperInput13 = ref("");
  const stepperInput14 = ref("");
  const stepperInput15 = ref("");
  const stepperInput16 = ref("");
  const textarea1 = ref("");
  const checkbox1 = ref(true);
</script>

Toggle to vertical or mobile on smaller screens

If you want to change the view from horizontal to vertical or mobile with smaller screens you can use the verticalBreakpoint and mobileBeakpoint properties specifying the number of pixels at which the stepper should change to vertical or mobile. You can resize the browser window to test it.

  • step1
    invalid
  • step2
  • step3 
<template>
  <MDBStepper :verticalBreakpoint="768" :mobileBreakpoint="400">
    <MDBStepperStep active>
      <MDBStepperHead>
        <template #icon>
          <MDBIcon icon="user" />
        </template>
        Step 1
      </MDBStepperHead>
      <MDBStepperContent>
        <MDBInput label="Step 1" v-model="stepperInput17" />
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead>
        <template #icon>
          <MDBIcon icon="envelope" />
        </template>
        Step 2
      </MDBStepperHead>
      <MDBStepperContent>
        <MDBInput label="Step 2" v-model="stepperInput18" />
      </MDBStepperContent>
    </MDBStepperStep>
    <MDBStepperStep>
      <MDBStepperHead>
        <template #icon>
          <MDBSpinner size="sm"></MDBSpinner>
        </template>
        Step 3
      </MDBStepperHead>
      <MDBStepperContent>
        <MDBInput label="Step 3" v-model="stepperInput19" />
      </MDBStepperContent>
    </MDBStepperStep>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBInput, MDBIcon, MDBSpinner } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBInput,
      MDBIcon,
      MDBSpinner
    },
    setup(){
      const stepperInput17 = ref("");
      const stepperInput18 = ref("");
      const stepperInput19 = ref("");
      return {
        stepperInput17,
        stepperInput18,
        stepperInput19
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBInput, MDBIcon, MDBSpinner } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperInput17 = ref("");
  const stepperInput18 = ref("");
  const stepperInput19 = ref("");
</script>

Events

Stepper emits events after successful step validation, after failed step validation, and before changing to another step. Check the browser console and try to change the step to see the result.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3 
<template>
  <MDBStepper
    linear
    @onInvalid="onInvalid"
    @onValid="onValid"
    @onChangeStep="onChangeStep"
  >
    <MDBStepperForm>
      <MDBStepperStep active>
        <MDBStepperHead icon="1">
          Step 1
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 1"
            v-model="stepperInput20"
            invalidFeedback="Invalid"
            required
          />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="2">
          Step 2
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 2"
            v-model="stepperInput21"
            invalidFeedback="Invalid"
            required
          />
        </MDBStepperContent>
      </MDBStepperStep>
      <MDBStepperStep>
        <MDBStepperHead icon="3">
          Step 3
        </MDBStepperHead>
        <MDBStepperContent>
          <MDBInput
            label="Step 3"
            v-model="stepperInput22"
            invalidFeedback="Invalid"
            required
          />
        </MDBStepperContent>
      </MDBStepperStep>
    </MDBStepperForm>
  </MDBStepper>
</template>
<script>
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBStepperForm,
      MDBInput
    },
    setup(){
      const stepperInput20 = ref("");
      const stepperInput21 = ref("");
      const stepperInput22 = ref("");
      const onInvalid = e => {
        console.log(e);
      };
      const onValid = e => {
        console.log(e);
      };
      const onChangeStep = e => {
        console.log(e);
      };
      return {
        stepperInput20,
        stepperInput21,
        stepperInput22,
        onInvalid,
        onValid,
        onChangeStep
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBStepper, MDBStepperStep, MDBStepperHead, MDBStepperContent, MDBStepperForm, MDBInput } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperInput20 = ref("");
  const stepperInput21 = ref("");
  const stepperInput22 = ref("");
  const onInvalid = (e: HTMLElement) => {
    console.log(e);
  };
  const onValid = (e: HTMLElement) => {
    console.log(e);
  };
  const onChangeStep = (e: HTMLElement) => {
    console.log(e);
  };
</script>

If you want to support our friends from TW Elements you can also check out the Tailwind stepper documentation.

Stepper - API

Import

<script>
  import {
    MDBStepper,
    MDBStepperStep,
    MDBStepperHead,
    MDBStepperContent,
    MDBStepperForm
  } from 'mdb-vue-ui-kit';
</script>

Properties

MDBStepper

Name Type Default Description
tag String 'ul' Defines tag of the MDBStepper element
activeStepIndex Number 1 Set initial active step
animation Boolean true Adds animation after step change
linear Boolean false Set true for linear stepper
vertical Boolean false Set true for vertical stepper
mobile Boolean false Set true for mobile stepper
mobileProgress Boolean false Set true to indicate progress of the stepper
noEditable Boolean false Set true to block editing of the completed step
verticalBreakpoint Number Set the resolution below which the stepper will switch to vertical mode
mobileBreakpoint Number Set the resolution below which the stepper will switch to mobile mode
disableStepperHeadClick Boolean false Set true to block the possibility of changing a step by clicking on another step
nextBtn String NEXT Set custom text for NEXT button
backBtn String BACK Set custom text for BACK button
stepTxt String step Set custom step value in the mobile stepper head
stepOfTxt String of Set custom of value in the mobile stepper head

MDBStepperStep

Name Type Default Description
dynamic Boolean false Recalculates the stepper height on content change
tag String 'li' Defines tag of the MDBStepperStep element
optional Boolean false Sets stepper step element optional

MDBStepperHead

Name Type Default Description
tag String 'div' Defines tag of the MDBStepperHead element

MDBStepperContent

Name Type Default Description
tag String 'div' Defines tag of the MDBStepperContent element

MDBStepperForm

Name Type Default Description
tag String 'div' Defines tag of the MDBStepperForm element

Methods

MDBStepper

Name Description Example
changeStep Switch to the step given as the parameter stepper.changeStep(index)
nextStep Switch to the next step stepper.nextStep()
prevStep Switch to the previous step stepper.prevStep()

MDBStepperStep

Name Description Example
setHeight Recalculates the height of the stepper step stepperStep.setHeight() 
<template>
  <div class="w-100">
    <div class="mb-3">
      <MDBBtn id="prev-step" color="primary" @click="stepperRef?.prevStep()">
        prev
      </MDBBtn>
      <MDBBtn id="next-step" color="primary" @click="stepperRef?.nextStep()">
        next
      </MDBBtn>
    </div>
    <div>
      <MDBStepper ref="stepperRef">
        <MDBStepperStep active>
          <MDBStepperHead icon="1"> Step 1 </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="2"> Step 2 </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep>
          <MDBStepperHead icon="3"> Step 3 </MDBStepperHead>
          <MDBStepperContent>
            <span>
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur
            </span>
          </MDBStepperContent>
        </MDBStepperStep>
      </MDBStepper>
    </div>
  </div>
</template>
<script>
  import {
    MDBStepper,
    MDBStepperStep,
    MDBStepperHead,
    MDBStepperContent,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBStepper,
      MDBStepperStep,
      MDBStepperHead,
      MDBStepperContent,
      MDBBtn,
    },
    setup() {
      const stepperRef = ref(null);

      return {
        stepperRef,
      };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBStepper,
    MDBStepperStep,
    MDBStepperHead,
    MDBStepperContent,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const stepperRef = ref<InstanceType<typeof MDBStepper> | null>(null);
</script>

Events

Name Description
@onChangeStep Event emitted before the step change
@onChangedStep This event is emitted after the active step change is taking place. Information about the current and previous steps can be accessed through the following properties of the emitted event: e.currentStep and e.prevStep.
@onValid Event emitted after successful step validation
@onInvalid Event emitted after unsuccessful step validation 
<template>
  <MDBStepper @onChangeStep="doSomething" >...</MDBStepper>
</template>

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;