Stepper

A set of steps used to indicate progress. Responsive by default: horizontal when every step gets 140vp, vertical otherwise. Tap a step to go back (or to the next one).

Usage

@Local step: number = 2;

SStepper({ value: this.step!! }) {
  SStepperItem({ step: 1, title: 'Address', description: 'Where to ship' })
  SStepperItem({ step: 2, title: 'Shipping', description: 'Pick a carrier' })
  SStepperItem({ step: 3, title: 'Payment', description: 'Card or wallet' })
  SStepperItem({ step: 4, title: 'Review' })
}
SButton({ text: 'Next' }).onClick(() => this.step = Math.min(4, this.step + 1))

Approximate web preview — the HarmonyOS rendering is the reference.

Vertical

linear: false lets the user jump to any step.

SStepper({ defaultValue: 2, orientation: 'vertical', linear: false }) {
  SStepperItem({ step: 1, title: 'Create account', description: 'Email and password' })
  SStepperItem({ step: 2, title: 'Verify email', description: 'Enter the 6-digit code we sent you' })
  SStepperItem({ step: 3, title: 'Invite team', disabled: true })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SStepper

shadcn-vue Stepper: numbered steps joined by separators; earlier steps are completed (check), the current one is active, later ones inactive.

Steps are numbers (1-based like reka-ui; value is the current step). orientation: 'responsive' (default) is horizontal when the stepper's own width gives every step at least 140vp, vertical otherwise. linear (default) only lets the user jump back or to the next step; tapping a step selects it.

Prop	Type	Default	Description
value!!	number | undefined	undefined	Controlled current step (use with !!). Leave undefined for uncontrolled.
defaultValue	number	1
orientation	StepperOrientation StepperOrientation = 'horizontal' | 'vertical' | 'responsive'	'responsive'
linear	boolean	true

Event	Type	Default	Description
onValueChange	(v: number) => void	() => { }

Slots: children (trailing closure)

SStepperItem

One step: indicator circle (rounded-full size-8; check when completed, number otherwise), title (text-sm font-semibold), description (text-xs text-muted-foreground) and the separator to the next step (h-0.5 bg-muted, bg-primary once completed). Extra content goes in the slot.

Prop	Type	Default	Description
step	number	1
title	ResourceStr	''
description	ResourceStr | undefined	undefined
disabled	boolean	false
icon	string | undefined	undefined	Lucide icon shown in the circle instead of the number (completed steps still show a check).

Slots: children (trailing closure)