Stepper

The Status component provides a standard way of listing down steps in a process. It is used to indicate the current step in a multi-step process, such as a form or a checkout flow. The component can be used to show the status of each step, such as whether it is complete, in progress, or not started.

WARNING

There is no state management involved in this component. The status of each step is determined by the data passed to the component. You can use the status prop to set the status of each step. The accepted values for the status prop are completed, active, and pending. The component will automatically update the appearance of each step based on the status passed to it.

Basic Usage

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

<template>
  <spr-stepper
    :steps="steps"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';

const steps = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description'
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending'
  },
]);
</script>

Horizontal Stepper

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

<template>
  <spr-stepper
    :steps="steps"
    variant="horizontal"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const steps = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description'
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending'
  },
]);
</script>

Steps with Description

1

Step 1Description 1

2

Step 2Description 2

3

Step 3Description 3

4

Step 4Description 4

<template>
  <spr-stepper
    :steps="stepsWithDescription"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const stepsWithDescription = ref([
  {
    number: 1,
    label: 'Step 1',
    status: 'completed',
    description: 'Description 1'
  },
  {
    number: 2,
    label: 'Step 2',
    status: 'active',
    description: 'Description 2'
  },
  {
    number: 3,
    label: 'Step 3',
    status: 'pending',
    description: 'Description 3'
  },
  {
    number: 4,
    label: 'Step 4',
    status: 'pending',
    description: 'Description 4'
  },
]);
</script>

Has Lines

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

1

Step 1Description

2

Step 2

3

Step 3

4

Step 4

TIP

The lines extend as long as there is an available space, you can manipulate the width of this stepper through "class" attribute to shorten or lengthen the lines.

<template>
  <spr-stepper
    :steps="steps"
    has-lines
  />

  <spr-stepper
    :steps="steps"
    has-lines
    variant="horizontal"
  />
</template>

State Playground

1

Playground Step 1

2

Playground Step 2

3

Playground Step 3

4

Playground Step 4

1

Playground Step 1

2

Playground Step 2

3

Playground Step 3

4

Playground Step 4

<template>
  <spr-stepper
    :steps="playgroundSteps"
    has-lines
    variant="vertical"
  />

  <spr-stepper
    :steps="playgroundSteps"
    has-lines
    variant="horizontal"
    class="w-1/2"
  />

  <spr-button tone="success" @click="updateSteps">Next State</spr-button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const playgroundSteps = ref([
  {
    number: 1,
    label: 'Playground Step 1',
    status: 'active',
  },
  {
    number: 2,
    label: 'Playground Step 2',
    status: 'pending',
  },
  {
    number: 3,
    label: 'Playground Step 3',
    status: 'pending',
  },
  {
    number: 4,
    label: 'Playground Step 4',
    status: 'pending'
  },
]);
const updateSteps = () => {
  // find the current active then set the next step to active
  const currentStep = playgroundSteps.value.find((step) => step.status === 'active');
  const currentIndex = playgroundSteps.value.indexOf(currentStep);
  if (currentIndex !== -1 && currentIndex < playgroundSteps.value.length - 1) {
    playgroundSteps.value[currentIndex].status = 'completed';
    playgroundSteps.value[currentIndex + 1].status = 'active';
  }
}
</script>

API Reference

Name	Description	Accepted Values	Type	Default
variant	Determines if the layout of the stepper is horizontal or vertical	'horizontal', 'vertical'	string	vertical
hasLines	Toggles the existence of lines	true / false	boolean	false
steps	For table values	Object	Steps { number: number; label: string; status: 'completed' | 'active' | 'pending'; description?: string; }

Product Uses