Stepper | getdom.studio

Workflow

Controlled checkout progress

The application owns the active key and form state. Linear navigation permits completed steps and the next incomplete step while Back and Continue remain ordinary application actions.

Current step

Details

Account and contact information

CheckoutProgress.vuevue

Orientation

Vertical review workflow

Descriptions, explicit completed states, and optional steps work in the vertical presentation without changing the controlled API.

ReviewWorkflow.vuevue

Playground

States and layout

Stepper playground

Adjust controlled selection, orientation, linear navigation, descriptions, and indicator size.

Playground.vuevue

vue

<script setup>
import { reactive } from 'vue';
import { DomStepper } from '@getdom/studio/vue';

const data = reactive({
	  "items": [
	    {
	      "key": "details",
	      "label": "Details",
	      "description": "Basic information"
	    },
	    {
	      "key": "permissions",
	      "label": "Permissions",
	      "description": "Roles and access"
	    },
	    {
	      "key": "review",
	      "label": "Review",
	      "description": "Confirm changes",
	      "optional": true
	    }
	  ],
	  "modelValue": "permissions",
	  "orientation": "horizontal",
	  "clickable": true,
	  "linear": false,
	  "showDescriptions": true,
	  "size": "md",
	  "ariaLabel": "Progress"
	});
</script>

<template>
	<DomStepper
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Architecture

Progress presentation, not workflow state

DomStepper owns accessible progress navigation and derived presentation states. The application owns validation, persistence, form data, routing, and whether moving forward is allowed.

Use explicit item statuses for server-reported completion or error states. Without them, steps before the controlled key are complete, the matching step is current, and later steps are upcoming.

Reference

Props

Control props

Name	Type	TS	Default	Description
`items`	array	Array<StepperItem `type StepperItem = { key: string \| number; // Stable controlled step key. label: string; // Human-readable step label. description?: string; // Optional supporting copy. status?: 'complete' \| 'current' \| 'upcoming' \| 'error'; // Explicit state override. optional?: boolean; // Mark the step as optional. disabled?: boolean; // Prevent navigation to this step. };` >	[]	Ordered application-owned step records.
`modelValue`	string \| number	string	''	Controlled active step key. Defaults to the first enabled item.
`orientation`	'horizontal' \| 'vertical'	string	'horizontal'	Arrange steps across a row or down a column.
`clickable`	boolean	boolean	true	Allow enabled step indicators and labels to change the active key.
`linear`	boolean	boolean	false	Prevent navigation beyond the next incomplete step.
`showDescriptions`	boolean	boolean	true	Show supporting descriptions when supplied.
`size`	'sm' \| 'md'	string	'md'	Indicator and label density.
`ariaLabel`	string	string	'Progress'	Accessible label for the step navigation.

Auto-generated from Stepper.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	string \| number	Fired when an enabled step is selected.
@change	StepperChangePayload	Fired with the selected step, key, index, and previous key.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Slots

Name	Scope	Description
#step	StepperSlotPayload	Replace the label and description while retaining navigation and progress structure.
#indicator	StepperSlotPayload	Replace the numbered, completed, or error indicator.
#separator	{ index, previous, next }	Replace the connector between adjacent steps.

Keyboard

← / →Move between enabled horizontal steps.
↑ / ↓Move between enabled vertical steps.
Home / EndMove to the first or last enabled step.