Stepper
Horizontal step progress with numbered, current, and complete states.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
current | current | 1-based index of the active step (default `1`). | number | number | 1 |
orientation | orientation | `horizontal` (default) or `vertical` (planned). | DuoStepperOrientation | "horizontal" | "vertical" | "horizontal" |
completeLabel | complete-label | Screen reader suffix for complete steps (default `Complete`). | string | string | "Complete" |
ariaLabel | aria-label | Accessible name for the step list. | string | string | "" |
Slots
| Name | Description |
|---|---|
default | `duo-stepper-item` elements. |
Usage
Stepper shows progress through a short linear flow. Each step has a bar, an index ball, and a label. Use current (1-based) to mark the active step; earlier steps are complete.
Do
- Use it to show where the user is in a short linear flow (for example select, then review).
- Give the list an accessible name with
aria-labelwhen there is no visible heading. - Keep labels short.
- Localize
complete-labelso screen readers hear that a step is done (default “Complete”).
Don’t
- Don’t use Stepper as a numbered list of content — use a list component.
- Don’t use it as modal or wizard chrome.
- Don’t rely on the checkmark icon alone; complete steps include a screen reader announcement.
- Don’t expect click or keyboard step navigation in this version.
States
| State | Ball | Assistive technology |
|---|---|---|
| Upcoming | Step number | Number and label only |
| Current | Step number | aria-current="step" |
| Complete | Checkmark | Visually hidden complete announcement |
Orientation
orientation defaults to horizontal. A vertical value is reserved so the API can stay stable; vertical layout is not implemented yet.
Events
None in v1. The stepper is a progress indicator only.