Stepper

A progress stepper that shows completed, current, and upcoming steps in vertical or horizontal layouts.

GitHub

Demo

Vertical

1. Account Step 1 of 4, completed
2. 2Billing
   Describe what happens in this step. Content appears under the current step.
   Step 2 of 4
3. 3Review Step 3 of 4
4. 4Done Step 4 of 4

Horizontal

1. Account Step 1 of 4, completed
2. 2Billing Step 2 of 4
3. 3Review Step 3 of 4
4. 4Done Step 4 of 4

Custom Indicator

1. ✔Account Step 1 of 4, completed
2. ✔Billing Step 2 of 4, completed
3. 3Review Step 3 of 4
4. 4Done Step 4 of 4

Install

npm i @vuesimple/vs-stepper

Usage

<template>
  <vs-stepper :steps="steps" :active-index="activeIndex" orientation="horizontal" />
</template>

<script>
  import VsStepper from '@vuesimple/vs-stepper';

  export default {
    components: { VsStepper },
    data() {
      return {
        activeIndex: 1,
        steps: [{ label: 'Account' }, { label: 'Billing' }, { label: 'Review' }],
      };
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-stepper@3.1.8/dist/index.umd.js"></script>

Props

Name	Type	Default	Description
steps	Array	required	Steps to render, each an object with a label string
activeIndex	Number	0	Index of the current step. Earlier steps are complete
orientation	'vertical' | 'horizontal'	'vertical'	Layout direction of the steps
ariaLabel	String	'Progress'	Accessible label for the list of steps

Slots

Name	Description
indicator	Replaces the default indicator. Receives step, index, and state ('complete', 'current', or 'upcoming').
content	Renders under the current step's label, with a short expand/collapse animation in vertical orientation. Receives step, index, and state.

Accessibility

• The steps are rendered as an ordered list labelled by ariaLabel.
• The current step has aria-current="step".
• Each step has screen reader text such as "Step 2 of 4, completed", and the indicator is hidden from assistive technology.