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.

Basic usage

View code

vue

<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

vue

<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 2

vue

<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 2

vue

<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 2

vue

<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

Types

step property model

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

Props

Name	Description	Type	Required	Default
model-value	The current step	`number`	No	`undefined`
steps	The steps	`MazStepperStep[]`	No	`undefined`
color	The color of the stepper	`MazColor`	No	`primary`
disabled-next-steps	Disable the next steps	`boolean`	No	`undefined`
disabled-previous-steps	Disable the previous steps	`boolean`	No	`undefined`
auto-validate-steps	Auto validate the steps	`boolean`	No	`undefined`
all-steps-opened	Open all steps	`boolean`	No	`undefined`
all-steps-validated	Validate all steps	`boolean`	No	`undefined`
can-close-steps	Allow to close the steps	`boolean`	No	`undefined`

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

MazStepper ​

Basic usage ​

Use step property instead of slots ​

Set step states programmatically ​

Auto validate steps ​

Auto disabled next or/and previous steps ​

All steps opened & success ​

Can close steps ​

Types ​

Props ​

Events ​

Slots ​

MazStepper

Basic usage

Use `step` property instead of slots

Set step states programmatically

Auto validate steps

Auto disabled next or/and previous steps

All steps opened & success

Can close steps

Types

Props

Events

Slots