Navigation & Menus

Stepper

Install

import { Stepper } from 'vael-ui'

Data

orientation

linear

clickable

motionCss ?

import { Stepper } from 'vael-ui'

<Stepper orientation="horizontal" linear clickable motionCss :items="items">Stepper</Stepper>

Name	Type	Default	Description
`items`	`readonly T[]`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`linear`	`boolean \| undefined`	`true`	Steps ahead of the active one are only clickable once reached (no skipping ahead). Past/current steps stay clickable.
`clickable`	`boolean \| undefined`	`true`	`false` renders a pure display/progress indicator — no click handling at all.
`motionCss`	`boolean \| undefined`	`true`	Gates the built-in check-mark/number swap transition inside the step circle.
`ui`	`Partial<{ root: UiPartValue; step: UiPartValue; trigger: UiPartValue; circle: UiPartValue; content: UiPartValue; label: UiPartValue; description: UiPartValue; connector: UiPartValue; }> \| undefined`
`modelValue`	`number \| undefined`	`0`

Name	Type	Description
`item`	`{ item: T; index: number; active: boolean; completed: boolean; disabled: boolean; }`

Name	Type	Description
`change`	`[index: number, item: T]`
`update:modelValue`	`[value: number]`

Name	Type	Description
`el`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.