Steps
A sequence, so numbering is earned. A track per step; done steps show a check.
Examples
Horizontal
- Completed: Account
- Workspace
- Members
- Billing
Vertical
- Completed: Email sent
- Enter code
- Done
Anatomy
ol.steps | An ordered list in a row of equal columns. |
> li | One step: a 2px track above its label. With numbers, a square counter sits above or beside it. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | step | On a step: the current one. Accent track, full text colour; with numbers, a solid accent counter. |
data-done | boolean | On a step: completed. Accent track; with numbers, a check in place of the counter. |
data-numbered | boolean | Shows a counter on each step and turns on the done check and current fill. |
data-vertical | boolean | Stacks the steps, counter beside the label and no track. Counters always show in this form; data-numbered adds the states. |
Accessibility
- Mark the current step with
aria-current="step"; it is the only state announced. - Done is visual only, so put
<span class="sr-only">Completed: </span>inside eachdata-donestep. - Counters are generated content, but the
<ol>already announces each position.