Navigation

Stepper

A horizontal sequence of steps showing progress through a multi-stage flow.

html

<UiStepper :items="..." />

Items

required

items is the sequence, each step a title plus an optional description, and optionally its own icon or disabled flag.

Cart

Review your items

Shipping

Delivery details

Payment

Add payment method

Done

Order confirmed

Model value

modelValue is the active step, two-way bound. The component also exposes next(), prev(), hasNext and hasPrev on its ref, for driving it from your own buttons.

Account

Create an account

Profile

Set up our profile

Complete

Complete the setup

The template ref exposes next()/prev()/hasNext/hasPrev for programmatic control — see the "Back/Next" buttons in the example above.

Default value

defaultValue sets which step is active first when uncontrolled. Defaults to the first item.

Account

Create an account

Profile

Set up our profile

Complete

Complete the setup

Orientation

orientation lays the steps in a row or a column. vertical stacks them down the side with descriptions beside each — the shape for a checklist rather than a wizard header.

Intro

Get to know the basics

Basics

Advanced

Deep dive into advanced topics

Practice

Certification

Get your certificate

Variant

variant sets how each step is marked. default gives every step a numbered circle; line replaces those with a divided progress line and puts the title under it — quieter, and better where the stepper is a header rather than the content.

Account

Create an account

Profile

Set up our profile

Complete

Complete the setup

variant="line" has no circular trigger at all — just a divided progress line (one segment per step) with the title/description below it, and the item's icon (if set) shown in front of the label; the in-progress step's segment is a half-opacity tint of color, distinct from completed (full color) and upcoming (muted) segments.

Color

color themes the completed and active steps. Keep it tied to meaning: success reads as “done” on a checklist, while primary reads as “where you are” in a wizard.

neutral

primary

secondary

success

error

warning

info

pending

Linear

linear is on by default: a step ahead of the active one can't be clicked. Turn it off where the reader is allowed to skip around — and note that a step marked disabled stays disabled either way.

Cart

Review your items

Shipping

Delivery details

Payment

Add payment method

Done

Order confirmed

Account

Create an account

Verify

Confirm your email

Profile

Set up our profile

Complete

Complete the setup

linear (the default) blocks jumping ahead by clicking a future step; set :linear="false" to make every step directly clickable regardless of progress.

Disabled

disabled freezes the whole stepper — no step can be navigated to, whatever linear says.

Account

Create an account

Profile

Set up our profile

Complete

Complete the setup

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

itemsrequired

StepperItem[]

—

The list of steps to display.

modelValue

string | number

—

Controls the active step. Omit this to let the stepper manage its own state internally (starting from `defaultValue`); pass it to fully control the active step yourself.

defaultValue

string | number

the first item

Which step is active first when uncontrolled.

orientation

"horizontal" | "vertical"

'horizontal'

variant

"default" | "line"

'default'

The visual style. `line` renders a divided progress line (one segment per step) with the title/description below it — no circular trigger like `default`; if a step has an `icon`, it's shown in front of its label. The in-progress step's segment is a half-opacity tint of `color`, distinct from completed (full color) and upcoming (muted) segments. Click a segment or label to jump to that step.

color

'neutral'

linear

boolean

true

Requires steps to be completed in order — clicking a step ahead of the active one is disabled; only `next()` can advance. Previous steps stay clickable so users can go back and review them.

disabled

boolean

false

Disables the whole stepper, preventing any step navigation.

Emits

Event

Payload

Description

update:modelValue

[value: StepValue]

—

next

[]

—

prev

[]

—

Types

type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";

type Orientation = "horizontal" | "vertical";

type Variant = "default" | "line";

type StepValue = string | number;

interface StepperItem {
    title?: string;
    description?: string;
    icon?: string;
    value?: StepValue;
    disabled?: boolean;
}