Skip to main content

Stepper

shadow

The Stepper component displays the progress through numbered steps. It provides a wizard-like workflow. Steppers show progress through a sequence of numbered steps.

Basic use​

Disabled (Deactivated) steps​

Custom buttons​

When to use​

Use wje-stepper when users need to enter values, choose options, or trigger form-related actions.

When not to use​

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility​

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices​

  • Keep validation rules and error behavior consistent across the entire form.
  • Show loading or disabled states during async operations.
  • Split complex forms into smaller sections with immediate feedback.

Attributes and Properties​

active​

DescriptionThe active color for the stepper.
Attributeactive
Typestring
Default-

done​

DescriptionThe done color for the stepper.
Attributedone
Typestring
Default-

Events​

No events available for this component.

Methods​

processStep​

DescriptionProcesses the current step and updates stepper state and navigation.
Signature(index: any, step: any, header: any, steps: any) => void
DescriptionNavigates to a different step in a multi-step process based on the provided direction.
Signature(direction: number) => void

goToStep​

DescriptionNavigates to a specific step in a workflow or process. Executes a set of operations before and after the step transition.
Signature(stepIndex: number) => void

setStepDefault​

DescriptionResets a step to its default state by clearing its active and done attributes. Updates the step's badge to show its index and removes any color styling.
Signature(nav: HTMLElement, badge?: HTMLElement｜null, stepIndex?: number) => void

setStepActive​

DescriptionSets a step as active by adding the active attribute and updating the step's badge.
Signature(nav: HTMLElement, badge?: HTMLElement｜null, stepIndex?: number｜null) => void

setContentActive​

DescriptionActivates the content of a specific step by displaying it and hiding all others.
Signature(stepIndex: number) => void

getStepElement​

DescriptionReturns the DOM element of a step by index.
Signature(stepIndex: number) => HTMLElement

renderStepContent​

DescriptionAppends or replaces content inside the step container.
Signature(stepIndex: number, content: Node｜string｜Node[], options?: \{ replace?: boolean \}) => void

setStepDone​

DescriptionMarks a step as completed by setting the done attribute and updating its badge with a check icon.
Signature(nav: HTMLElement, badge?: HTMLElement｜null) => void

setStepLocked​

DescriptionSets step locked and applies related state updates.
Signature(nav: any, badge: any) => void

CSS Shadow Parts​

NameDescription
nativeThe native part of the stepper.
headerThe header part of the stepper.
contentThe content part of the stepper.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
defaultThe default slot for the stepper.

Content