Stepper
Multi-step process visualisation with numbered indicators, titles, and connectors. Good for checkout flows and onboarding.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
Stepper,
StepperDescription,
StepperIndicator,
StepperItem,
StepperSeparator,
StepperTitle,
StepperTrigger,
} from "@/components/ui/stepper";
</script>
<template>
<Stepper>
<StepperItem>
<StepperTrigger>
<StepperIndicator />
<StepperTitle />
<StepperDescription />
</StepperTrigger>
<StepperSeparator />
</StepperItem>
</Stepper>
</template>Default
Three-step horizontal stepper.
Step 1
Address
Where to ship
Step 2
Shipping
Carrier and speed
Step 3
Payment
Card or bank
Step 2 of 0
API Reference
Props, events, and slots for each sub-component.
Stepper
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | number | 1 | 1-based active step. Supports v-model. |
| orientation | "horizontal" | "vertical" | "horizontal" | Axis. |
| linear | boolean | true | Block jumping past incomplete steps. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the active step changes. Enables v-model. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing the current step state for the items. |
StepperItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| step | number | — | 1-based step number this item represents. |
| disabled | boolean | false | Block activating this step. |
StepperTrigger / StepperIndicator
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Trigger makes a step clickable; Indicator renders the numbered/checked badge. |
StepperTitle / StepperDescription / StepperSeparator
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Per-step label, helper text, and the connector line between steps. |