Stepper ​

The VStepper component allows you to create a stepper that guides users through a series of steps or stages. It can be used to display the progress of a task, or to navigate through different pages or sections.

Usage ​

Basic Usage ​

To use the VStepper component, you need to register it globally by installing @morpheme/ui. Then, you can include it in your template like this:

The items prop should be an array of objects, each representing a step in the stepper. Each step object should have at least a title property. You can also include a subtitle and a path property if needed.

Linear ​

• prop: linear
• type: boolean
• default: default
• required: false

Use linear to set the stepper's active state as continuous, meaning to get to next step, previous step must be passed. When it is set to true previous will also be set as active. When it is set to false, only current step will be set as active.

Disable Route Active ​

• prop: disableRouteActive
• type: boolean
• default: false
• required: false

By default, this component check active route to determine active state. Set disableRouteActive to true to base stepper active state by modelValue instead of active route.

Linkable ​

• prop: linkable
• type: boolean
• default: false
• required: false

Use linkable to make the step item to be clickable as route. This works well with disableRouteActive set to false.

<template>
  <VStepper linkable />
</template>

<template>
  <VStepper linkable />
</template>

Clickable ​

• prop: clickable
• type: boolean
• default: false
• required: false

Use clickable to allow click event to be emitted, allowing interaction with the step item. This is useful for when stepper needs to be rendered inside for example, a modal, which makes linkable unfeasible to be used for navigation through interaction with the step item.

Vertical ​

• prop: vertical
• type: boolean
• default: false
• required: false

Use vertical to render the stepper in vertical mode.

v-model ​

• prop: modelValue
• type: boolean
• default: true
• required: false

Use v-model to set current step.

Props ​

Events ​

Standalone Installation ​

You can also install the Stepper component individually via @morpheme/stepper package:

npm i @morpheme/stepper

npm i @morpheme/stepper

<script setup lang="ts">
import VStepper from '@morpheme/stepper';
</script>

<template>
  <VStepper />
</template>

<script setup lang="ts">
import VStepper from '@morpheme/stepper';
</script>

<template>
  <VStepper />
</template>

Storybook ​

View Storybook documentation here.