Stepper

Multi-step progress indicators for wizards, checkout flows, and onboarding sequences. Supports horizontal, vertical, and clickable variants with built-in state management.

Horizontal Stepper

Account Create your credentials

Profile Personal information

Preferences Customize your experience

Confirmation Review & submit

Vertical Stepper

Order Placed Your order has been confirmed

Processing We're preparing your items

Shipped On the way to your address

Delivered Package received

Clickable Stepper

Plan Choose a subscription

Billing Payment details

Verification Identity check failed

Click any step to navigate directly. The error state on step 3 shows validation feedback.

API Reference

Wiring

import { ref } from 'vue';
import { useStepper } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
const stepper = useStepper(root);   // wires .vd-stepper inside root; cleanup on unmount

// drive it imperatively
stepper.next(stepperEl);
stepper.setStep(stepperEl, 2);

CSS Classes

Class	Description
`.vd-stepper`	Base container for the stepper component. Renders a horizontal step track by default.
`.vd-stepper-vertical`	Modifier that stacks steps vertically with a connecting line on the left.
`.vd-stepper-clickable`	Enables pointer cursor and click-to-navigate behavior on each step.
`.vd-stepper-item`	Individual step wrapper. Holds the circle, label, and description.
`.vd-stepper-circle`	Circular indicator showing the step number, check icon, or error icon.
`.vd-stepper-label`	Primary text label for the step.
`.vd-stepper-description`	Secondary text below the label providing additional context.
`.is-active`	Marks the currently active step with primary-colored circle and bold label.
`.is-completed`	Marks a step as finished. Displays a check icon and success styling.
`.is-error`	Marks a step as having an error. Displays danger color and warning icon.

Composable API

Symbol	Description
`useStepper(root)`	Composable — wires every .vd-stepper inside the root ref; returns an imperative API. Call once in setup().
`stepper.next(el) / prev(el)`	Advance or rewind the given stepper element.
`stepper.setStep(el, index)`	Set the active step (zero-based); earlier steps are marked completed.

Events

Event	Description
`stepper:change`	Fired on the stepper element when the active step changes. event.detail contains { current, previous, total }.

Accessibility

The stepper container uses role="list" and each step uses role="listitem" for assistive technology.
Active step is announced via aria-current="step".
Completed steps convey state through aria-label="Completed" on the circle.
Error steps include aria-label="Error" for screen reader feedback.
Clickable steppers add tabindex="0" and respond to Enter and Space key presses.
Focus order follows the visual step sequence from first to last.