Stepper VStepper shows the steps of a process and where the reader stands. Render the content of each step yourself from the same v-model.
Usage 1 Account 2 Shipping 3 Payment 4 Review The account form goes here.
Back Next
<script setup lang="ts">
import { computed, ref } from 'vue'
import { VButton, VStepper, VTypography } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'
const STEPS: StepperStep[] = [
{ value: 'account', title: 'Account' },
{ value: 'shipping', title: 'Shipping' },
{ value: 'payment', title: 'Payment' },
{ value: 'review', title: 'Review' },
]
const current = ref('account')
const index = computed(() => STEPS.findIndex((step) => step.value === current.value))
function go(offset: number) {
current.value = STEPS[index.value + offset]!.value as string
}
</script>
<template>
<div class="checkout">
<VStepper v-model="current" :steps="STEPS" />
<VTypography>The {{ STEPS[index]!.title.toLowerCase() }} form goes here.</VTypography>
<div class="actions">
<VButton variant="outline" tone="neutral" :disabled="index === 0" @click="go(-1)">
Back
</VButton>
<VButton :disabled="index === STEPS.length - 1" @click="go(1)">Next</VButton>
</div>
</div>
</template>
<style scoped>
.checkout {
display: grid;
gap: var(--vectis-space-6);
}
.actions {
display: flex;
gap: var(--vectis-space-2);
}
</style> Examples States Steps before the current one are completed and those after it upcoming. completed overrides this for a step, error wins over every state and disabled takes a step out of reach.
Account Completed Shipping Completed Payment Card declined Error 4 Review <script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'
const STEPS: StepperStep[] = [
{ value: 'account', title: 'Account' },
{ value: 'shipping', title: 'Shipping', disabled: true },
{ value: 'payment', title: 'Payment', description: 'Card declined', error: true },
{ value: 'review', title: 'Review' },
]
const current = ref('review')
</script>
<template>
<VStepper v-model="current" :steps="STEPS" />
</template> Non-linear By default only the steps already reached are buttons. nonLinear makes every step one; set completed on the steps that are done.
Profile Completed 2 Team Billing Completed 4 Integrations <script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'
const STEPS: StepperStep[] = [
{ value: 'profile', title: 'Profile', completed: true },
{ value: 'team', title: 'Team' },
{ value: 'billing', title: 'Billing', completed: true },
{ value: 'integrations', title: 'Integrations' },
]
const current = ref('team')
</script>
<template>
<VStepper v-model="current" :steps="STEPS" non-linear label="Workspace setup" />
</template> Vertical orientation="vertical" lays the steps down a column, for a sidebar. Below 36rem, a horizontal stepper keeps only the title of the current step on screen.
Import contacts From a CSV file Completed 2 Map the columns Name, email, company 3 Check duplicates Merge or skip 4 Done <script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'
const STEPS: StepperStep[] = [
{ value: 'import', title: 'Import contacts', description: 'From a CSV file' },
{ value: 'map', title: 'Map the columns', description: 'Name, email, company' },
{ value: 'check', title: 'Check duplicates', description: 'Merge or skip' },
{ value: 'done', title: 'Done' },
]
const current = ref('map')
</script>
<template>
<VStepper v-model="current" :steps="STEPS" orientation="vertical" />
</template> API Props Slots Types Types used in the API tables. Import exported types from vectis-ui.
export type ItemValue = string | number export interface StepperIndicatorSlotProps {
step: StepperStep
index: number
state: StepperStepState
} export interface StepperStep {
value: ItemValue
title: string
description?: string
error?: boolean
completed?: boolean
disabled?: boolean
} export type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming' CSS variables