Stepper
`<pura-stepper>` renders a sequence of numbered steps connected by lines, marking completed ones with a check, highlighting the current one and dimming the upcoming ones. Use it in multi-step flows such as checkout, onboarding or forms split into steps. It is agent-native: the host exposes `data-count`/`data-active` and each step carries `data-index` and `data-state` ("complete" | "current" | "upcoming"), plus an ordered list with `aria-current="step"` and ARIA labels that spell out position and state, making the progress readable by machines and by assistive technology.
Preview
<pura-stepper id="checkout" steps="Account, Shipping, Payment, Review" active="1"></pura-stepper>
<div style="margin-top:1.5rem;display:flex;gap:.5rem">
<button id="prev">Back</button>
<button id="next">Next</button>
</div>
<script type="module">
import "/pura/lib/stepper.js";
const stepper = document.getElementById("checkout");
const total = stepper.getAttribute("steps").split(",").length;
document.getElementById("next").addEventListener("click", () => {
const i = Math.min(stepper.active + 1, total - 1);
stepper.setAttribute("active", String(i));
});
document.getElementById("prev").addEventListener("click", () => {
const i = Math.max(stepper.active - 1, 0);
stepper.setAttribute("active", String(i));
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
steps | string | "" | Step labels separated by commas, e.g.: "Account, Shipping, Payment". Spaces are trimmed and empty items discarded. |
active | number | 0 | Zero-based index of the current step. Steps with a lower index are completed, the equal one is current and the higher ones are upcoming. |
orientation | string | "horizontal" | Direction of the indicator: "horizontal" (default) or "vertical". |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/stepper.js"></script>import "./pura/lib/stepper.js";