Stepper
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
This example presents the stepper in a standard multi-step flow with the default navigation controls.
Disabled (Deactivated) steps
This example disables selected steps so you can see how the stepper communicates unavailable navigation.
Custom buttons
This example replaces the default controls with custom buttons, which is useful in more specialized wizard flows.
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
| Description | The active color for the stepper. |
| Attribute | active |
| Type | string |
| Default | - |
done
| Description | The done color for the stepper. |
| Attribute | done |
| Type | string |
| Default | - |
startIndex
| Description | Sets the start index for an operation or a process. This method assigns the provided value to the attribute 'start-index'. |
| Attribute | start-index |
| Type | number｜string |
| Default | - |
Events
No events available for this component.
Methods
navigate
| Description | Navigates to a different step in a multi-step process based on the provided direction. |
| Signature | (direction: number) => void |
goToStep
| Description | Navigates to a specific step in a workflow or process. Executes a set of operations before and after the step transition. |
| Signature | (stepIndex: number) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the stepper. |
header | The header part of the stepper. |
content | The content part of the stepper. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | The default slot for the stepper. |