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
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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
<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
-
step1
-
step2
-
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
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem 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
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
<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
-
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.
<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
-
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.
-
step1
-
step2
-
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};
--#{$prefix}stepper-mobile-active-progress-bar-color: #{$stepper-mobile-active-progress-bar-color};
--#{$prefix}stepper-mobile-footer-bg: #{$stepper-mobile-footer-bg};
--#{$prefix}stepper-mobile-head-bg: #{$stepper-mobile-head-bg};
--#{$prefix}stepper-mobile-invalid-icon-bg: #{$stepper-mobile-invalid-icon-bg};
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: rgba(var(--#{$prefix}emphasis-color-rgb), 0.1);
$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(var(--#{$prefix}emphasis-color-rgb), 0.025);
$steps-head-text-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
$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(var(--#{$prefix}emphasis-color-rgb), 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: var(--#{$prefix}primary);
$stepper-mobile-completed-head-icon-bg: var(--#{$prefix}success);
$stepper-head-icon-bg: var(--#{$prefix}surface-inverted-bg);
$stepper-head-icon-color: var(--#{$prefix}surface-inverted-color);
$stepper-completed-head-icon-bg: var(--#{$prefix}success-bg-subtle);
$stepper-completed-head-icon-color: var(--#{$prefix}success-text-emphasis);
$stepper-active-head-icon-bg: var(--#{$prefix}primary-bg-subtle);
$stepper-active-head-icon-color: var(--#{$prefix}primary-text-emphasis);
$stepper-invalid-head-icon-bg: var(--#{$prefix}danger-bg-subtle);
$stepper-invalid-head-icon-color: var(--#{$prefix}danger-text-emphasis);
$stepper-disabled-head-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3);
$stepper-disabled-head-icon-bg: $stepper-head-icon-bg;
$stepper-disabled-head-icon-color: rgba(var(--#{$prefix}surface-inverted-color-rgb), 0.55);
$stepper-mobile-head-padding-y: 0.5rem;
$stepper-mobile-head-padding-x: 1rem;
$stepper-mobile-head-bg: var(--#{$prefix}stepper-mobile-bg);
$stepper-mobile-footer-height: 2.5rem;
$stepper-mobile-footer-bg: $stepper-mobile-head-bg;
$stepper-mobile-invalid-icon-bg: var(--#{$prefix}danger);
$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: var(--#{$prefix}secondary-bg);
$stepper-mobile-active-progress-bar-color: var(--#{$prefix}primary);