Stepper

Beta notice: This page is being built.Edit on GitHub(opens in new tab)

Displays progress by default. Set variant to wizard to show one persistent Step panel at a time with Next/Back navigation. Inside Form, Next validates the current panel and shared fields; only an explicit submit Button in the last Step submits all fields. Outside Form, wizard navigation works independently without submitting data. Set height to pin progress above centered, scrollable panels.

This is a LongLink-specific component.

longlink docs component "Stepper"

Example

  1. Detailscompleted
  2. Review
  3. Complete
  1. Details
  2. Review
  3. Complete
Enter your workflow details.

Properties

Stepper - Properties
variant"progress" | "wizard"
Defaults to progress. Wizard mode owns persistent panels and Next/Back navigation.
heightnumber | string
Bounds a wizard, pinning progress above its scrollable panels.
next(step: number) => { label: string; action: () => void | boolean | Promise<void | boolean> } | undefined
Runs intermediate work after validation. Returning false prevents advancement.
onCancel() => void
Adds a Cancel action to wizard navigation.
backVariant"secondary" | "ghost"
Wizard Back button appearance; defaults to secondary.
childrenReactNode
Step elements to render in the stepper.
activeStepnumber
Zero-based active index. Wizard mode manages selection internally when omitted.
orientation"horizontal" | "vertical"
Layout direction of the stepper.
onStepClick(index: number) => void
Enables progress step activation, or receives wizard selection changes.
Step - Properties
stepnumber
Optional progress index; defaults to child order. Wizards always use child order.
labelstring
Visible label identifying the step.
descriptionstring
Supporting text displayed below the step label.
childrenReactNode
Persistent panel content in wizard mode; inline content in progress mode.