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
vue
<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>Type
Stepper type is classified as compact (default) and solid. The stepper below is an example of a solid type.
Step 1Description
2
Step 2
3
Step 3
4
Step 4
vue
<template>
<div style="width:200px;">
<spr-stepper
:steps="steps"
type="solid"
/>
</div>
</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
vue
<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
vue
<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.
vue
<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
vue
<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
Props
| Name | Description | Type | Default |
|---|---|---|---|
variant | Determines if the layout of the stepper is horizontal or vertical. Affects the arrangement and styling of the steps. | 'horizontal' | 'vertical' | 'vertical' |
hasLines | Toggles the visibility of connector lines between steps. When true, shows lines connecting each step to visually indicate progress flow. | boolean | false |
steps | Array of step configuration objects that define the content and state of each step in the stepper. Each step can have the following properties:
| StepPropTypes[] | [] |
type | Controls the visual style of the stepper. 'compact' uses minimal styling with outline indicators, while 'solid' uses filled background colors for active and completed steps. | 'compact' | 'solid' | 'compact' |
Events
| Name | Description | Parameters |
|---|---|---|
click | Emitted when a step is clicked. This event is emitted by the individual Step component. | (evt: MouseEvent) - The mouse event that triggered the click |
Step Props
| Name | Description | Type | Required |
|---|---|---|---|
number | The step number displayed in the step indicator. | number | Yes |
label | Text label shown for the step. | string | No |
status | Current state of the step:
| 'completed' | 'active' | 'pending' | No (defaults to 'pending') |
description | Optional descriptive text shown below the step label. | string | No |
Product Uses
