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.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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

Instead of using slots, you can provide its data with the steps property

You can use html in all properties

Content 1

vue

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

Replace default step point

Content 1

vue

<template>
  <MazStepper
    :steps="[
      { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
      { title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2', content: 'Content 2' },
    ]"
  >
    <template #point="{ step }">
      <div class="bg-red-500 p-1 size-8 rounded flex flex-center">{{ step }}</div>
    </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
point
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 ​

Replace default step point ​

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

Replace default step point

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