Stepper

A row of dots showing which step of a flow the user is on.

Step 0 of 0

1<template>2  <Stepper :steps="7" :model-value="0" />3</template>

Props

Name	Type	Default
steps	number	-
modelValue	number	0

Use this when the steps don't need names - a compact strip of dots is enough context (e.g. "step 3 of 7" shown elsewhere on the page).

Don't use this when each step needs a label - use StepperVertical instead, which also gives completed steps their own distinct fill; here, completed and current steps render identically.
Don't use this for a quantitative progress amount (e.g. "60% uploaded") - use Progress instead.

A vertical list of labeled steps, showing which are done, current, or upcoming.

Step 1 of 0

1<template>2  <StepperVertical :items="[{ title: 'Account' }, { title: 'Shipping' }, { title: 'Payment' }]" :model-value="1" />3</template>

Name	Type	Default
items	{ title: string }[]	-
modelValue	number	0

Use this for a multi-step flow (e.g. checkout, onboarding) where each step needs a visible name.
Rely on completed steps getting their own distinct fill, separate from the current step - unlike Stepper, where the two render identically.

Don't use this for a quantitative progress amount (e.g. "60% uploaded") - use Progress instead.
Don't use this when the steps don't need names - use Stepper for a more compact strip of dots.