◇

Stepper

7 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  StepperRoot,
  StepperItem,
  StepperTrigger,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from '@robonen/primitives/stepper';

<StepperRoot>
  <StepperItem />
  <StepperTrigger />
  <StepperIndicator />
  <StepperTitle />
  <StepperDescription />
  <StepperSeparator />
</StepperRoot>

API Reference

StepperRoot

Root

Prop	Type	Default	Description
`modelValue`?	`number`	—	Controlled active step (1-based). Use `v-model`.
`defaultValue`?	`number`	`1`	Uncontrolled initial step.
`orientation`?	`StepperOrientation`	`'horizontal'`	Orientation.
`dir`?	`StepperDirection`	—	Writing direction. Falls back to `ConfigProvider` when omitted.
`linear`?	`boolean`	`true`	Require steps to be completed in order.
`disabled`?	`boolean`	—	Disable the entire stepper.

StepperItem

Item

Prop	Type	Default	Description
`step`	`number`	—	1-based index associating this item with a step.
`disabled`?	`boolean`	—	Disable this specific step.
`completed`?	`boolean`	—	Mark the step as completed regardless of current `modelValue`.