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

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

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

You can use html in all properties

Content 1

Content 2

Content 3

Content 4

<template>
  <MazStepper
    :steps="[
      { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
      { title: 'Title 2', subtitle: '<span class="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

Content 2

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

Accessibility

Each step header is a button exposing the current step (aria-current="step") and its open state (aria-expanded), and controls its content (aria-controls), labelled by the header. The ids are unique per instance.

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model The current step	number	No	-	-
steps	The steps	MazStepperStep[]	No	-	-
color	The color of the stepper	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
disabled-next-steps	Disable the next steps	boolean	No	-	-
disabled-previous-steps	Disable the previous steps	boolean	No	-	-
auto-validate-steps	Auto validate the steps	boolean	No	-	-
all-steps-opened	Open all steps	boolean	No	-	-
all-steps-validated	Validate all steps	boolean	No	-	-
can-close-steps	Allow to close the steps	boolean	No	-	-

Events

Event name	Payload	Description
update:model-value	value: number

Slots

Name	Description	Bindings
point		step number
icon-	One slot per step: #icon-<step>.	-
title-	One slot per step: #title-<step>.	-
subtitle-	One slot per step: #subtitle-<step>.	-
title-info-	One slot per step: #title-info-<step>.	-
content-	One slot per step: #content-<step>.	-