Stepper

Data

A multi-step progress indicator for wizards and onboarding flows. Clickable steps.

Props

Prop	Type	Default	Description
`steps`*	`DsStep[]`	—	Array of step definitions with label, description?.
`modelValue`	`number`	`0`	Current step index (v-model, 0-based).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.

Examples

Horizontal (interactive)

Account

Basic information

Profile

Your preferences

Review

Check details

Done

All set

vue

<script setup lang="ts">
const step = ref(0)
const steps = [
  { label: 'Account', description: 'Basic info' },
  { label: 'Profile', description: 'Preferences' },
  { label: 'Review',  description: 'Check' },
  { label: 'Done',    description: 'All set' },
]
</script>
<template>
  <DsStepper v-model="step" :steps="steps" />
</template>

Vertical

Account

Basic information

Profile

Your preferences

Review

Check details

Done

All set

Skeleton

Use DsStepperSkeleton as a loading placeholder while content is being fetched.

4 steps

vue

<DsStepperSkeleton :steps="4" />

3 steps

vue

<DsStepperSkeleton :steps="3" />

Accessibility

Uses role="list" and role="listitem".
Active step has aria-current="step".
Each step button is focusable and keyboard-activated.

Kanban

Table