MazStepper

MazStepper is a standalone UI component customizable, reactive for intuitive step-by-step navigation. Ideal for guiding users through forms, workflows, or checkout processes.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

E-mail

password

Delivery address

Credit card number

View code

<template>
  <MazStepper auto-validate-steps>
    <template #title-1>
        Sign-In
    </template>
    <template #subtitle-1>
      You should be signed in to continue
    </template>
    <template #title-info-1>
      Required
    </template>
    <template #content-1="{ nextStep }">
      <form @submit.prevent="nextStep">
        <MazInput v-model="email" label="E-mail" type="email" autocomplete="new-email" name="new-email" />
        <br />
        <MazInput v-model="password" label="password" type="password" autocomplete="new-password" name="new-password" />
        <br />
        <MazBtn type="submit">
          Sign-In
        </MazBtn>
      </form>
    </template>

    <template #title-2>
      Delivery address
    </template>
    <template #subtitle-2>
      Where should we deliver your package?
    </template>
    <template #title-info-2>
      {{ address }}
    </template>
    <template #content-2="{ nextStep, previousStep }">
      <MazInput v-model="address" label="Delivery address" />
      <br />
      <MazBtn @click="previousStep" color="secondary">
        Previous
      </MazBtn>
      <br />
      <br />
      <MazBtn @click="nextStep">
        Validate
      </MazBtn>
    </template>

    <template #title-3>
      Checkout
    </template>
    <template #subtitle-3>
      Provide credit card
    </template>
    <template #content-3="{ nextStep, previousStep }">
      <MazInput label="Credit card number" type="number" />
      <br />
      <MazBtn @click="previousStep" color="secondary">
        Previous
      </MazBtn>
      <br />
      <br />
      <MazBtn @click="nextStep">
        Payment
      </MazBtn>
    </template>
  </MazStepper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const email = ref()
  const password = ref()
  const address = ref('20 Cooper Square')
</script>

Use step property instead of slots

Displayed steps are generated with the slots <template #content-1 />, but you can provide its title, subtitle and title-info with the steps props

Content 1

Content 2

Content 3

Content 4

<template>
  <MazStepper
    :steps="[
      { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1' },
      { title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2' },
      { title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3' },
      { title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4' },
    ]"
  >
    <template #content-1> Content 1 </template>
    <template #content-2> Content 2 </template>
    <template #content-3> Content 3 </template>
    <template #content-4> Content 4 </template>
  </MazStepper>
</template>

Set step states programmatically

You can set differents state with its style to each step with the property step

States available: 'success' | 'warning' | 'error' | 'disabled'

You should respect order of steps in the array:

Content 1

Content 2

Content 3

Content 4

<template>
  <MazStepper
    v-model="currentStep"
    :steps="[
      { disabled: true },
      { success: true },
      { warning: true, disabled: true },
      { error: true },
    ]"
  >
    <template #title-1> Title 1 </template>
    <template #title-info-1> Disabled </template>
    <template #content-1> Content 1 </template>

    <template #title-2> Title 2 </template>
    <template #title-info-2> Success </template>
    <template #content-2> Content 2 </template>

    <template #title-3> Title 3 </template>
    <template #title-info-3> Warning & Disabled </template>
    <template #content-3> Content 3 </template>

    <template #title-4> Title 4 </template>
    <template #title-info-4> Error </template>
    <template #content-4> Content 4 </template>
  </MazStepper>
</template>

Auto validate steps

You can use the prop option:

• auto-validate-steps

Then all previous steps then the current and then the validated state

TIP

Click on the first or third step to see the validated steps changes:

Content 1

Content 2

Content 3

<template>
  <MazStepper
    v-model="currentStep"
    auto-validate-steps
    color="secondary"
  >
    <template #title-1> Step 1 </template>
    <template #content-1> Content 1 </template>

    <template #title-2> Step 2 </template>
    <template #content-2> Content 2 </template>

    <template #title-3> Step 3 </template>
    <template #content-3> Content 3 </template>
  </MazStepper>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const currentStep = ref(2)
</script>

Auto disabled next or/and previous steps

To not allow your users to go to the next steps, you can use the following prop options:

• disabled-previous-steps
• disabled-next-steps

TIP

Try to click on first and third steps

Content 1

Content 2

Content 3

<template>
  <MazStepper
    :model-value="2"
    disabled-previous-steps
    disabled-next-steps
  >
    <template #title-1> Step 1 </template>
    <template #content-1> Content 1 </template>

    <template #title-2> Step 2 </template>
    <template #content-2> Content 2 </template>

    <template #title-3> Step 3 </template>
    <template #content-3> Content 3 </template>
  </MazStepper>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const currentStep = ref(2)
</script>

All steps opened & success

To open and validate all steps, you can use the following prop options:

• all-steps-validated
• all-steps-opened

Content 1

Content 2

Content 3

Can close steps

Use the property can-close-steps to let the user be able to close each step on click

TIP

Click on step titles to toggle content

Content 1

Content 2

Content 3

Types

step property model

type Steps = Array<{
  title?: string
  subtitle?: string
  titleInfo?: string
  disabled?: boolean
  error?: boolean
  success?: boolean
  warning?: boolean
}>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	The current step	number	-	undefined
steps	The steps	Steps	-	undefined
color	The color of the stepper @default primary	Color	-	'primary'
disabledNextSteps	Disable the next steps	boolean	-
disabledPreviousSteps	Disable the previous steps	boolean	-
autoValidateSteps	Auto validate the steps	boolean	-
allStepsOpened	Open all steps	boolean	-
allStepsValidated	Validate all steps	boolean	-
canCloseSteps	Allow to close the steps	boolean	-

Events

Event name	Properties	Description
update:model-value

Slots

Name	Description	Bindings
icon-$	Replace step number in the circle by an icon for the step
title-$	Title of the step
title-$	Subtitle of the step
title-info-$	Info of the right of the step
content-$	Content of the step	validated boolean - If the step is validated error boolean - If the step has an error warning boolean - If the step has a warning next-step Function - Function to go to the next step previous-step Function - Function to go to the previous step