Stepper

Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.

#
Usage

Horizontal stepper with named step slots and Previous / Next controls.

Basic information

Enter your project details here.

Multi-step form with validation, sidebar summaries, and external footer actions.

Name	Description	Type	Default	Values
size	Control size. One of xs, sm, md, lg, xl.	String	md	xssmmdlgxl
color	Theme or CSS color used for the control accents.	String	primary
modelValue	Active step value (`v-model`).	String Number
steps	Step definitions (value, title, optional, completed, error, etc.).	Array	() => []
validate	Runs before leaving the current step; return false to block navigation.	Function
beforeChange	Async guard before changing steps; return false to cancel.	Function
variant	Indicator style: line or dot.	String	line	linedot
orientation	Layout direction: vertical (sidebar) or horizontal.	String	vertical	horizontalvertical
labelPlacement	Where labels sit relative to indicators in horizontal mode.	String	end	endbottom
linear	Require prior steps to be completed before navigating ahead.	Boolean	true
interactive	Allow clicking step indicators to navigate.	Boolean	true
editable	Allow revisiting completed steps (shows edit icon).	Boolean	false
disabled	Disables all step navigation.	Boolean	false
loading	Blocks navigation while an async step action runs.	Boolean	false
iconComplete	Icon for completed steps.	String
iconError	Icon for steps in an error state.	String
iconEdit	Icon for editable completed steps.	String

Name	Description
content-prefix	Content rendered above the active step panel.
[stepValue]	Panel content for a step; slot name matches `step.value`.
summary-[stepValue]	Sidebar summary for a completed step (vertical orientation).

Name	Description
update:modelValue	Active step value (`v-model`).
change	Emitted when the active step changes; payload is `(value, index)`.
step-complete	Emitted when a step is marked complete via `next()`; payload is `(value, index)`.

Name	Description
next	Advance to the next step after validation.
prev	Go to the previous step.
goTo	Navigate to a step by value or index when allowed.
reset	Clear completion state and return to the first step.