Stepper
Progress through a flow of steps, horizontal or vertical, clickable, condensing to "Step 2 of 4" when narrow.
Rendering Stepper…
Installation
Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.
npx mlola-ui add stepperUsage
import { Stepper } from "@/components/ui/stepper";
export default function Example() {
return (
<Stepper
label="Checkout"
current={1}
steps={[{ label: "Cart" }, { label: "Shipping" }, { label: "Payment" }, { label: "Review", optional: true }]}
/>
);
}Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:
<html data-theme="graphite" data-mode="light">HTML
The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.
<nav class="ml-stepper" aria-label="Checkout" data-orientation="horizontal">
<p class="ml-stepper-summary" aria-hidden="true"><span>Step 2 of 4</span><strong>Shipping</strong><span class="ml-stepper-meter" style="--ml-stepper-progress:0.3333333333333333"></span></p>
<ol class="ml-stepper-list">
<li class="ml-stepper-step" data-status="complete">
<span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true"><svg class="mlola-glyph" width="0.8em" height="0.8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="20 6 9 17 4 12" pathLength="1"></polyline></svg></span><span class="ml-stepper-text"><span class="ml-stepper-label">Cart</span></span><span class="ml-visually-hidden">, completed</span></span>
</li>
<li class="ml-stepper-step" data-status="current" aria-current="step">
<span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">2</span><span class="ml-stepper-text"><span class="ml-stepper-label">Shipping</span></span><span class="ml-visually-hidden"></span></span>
</li>
<li class="ml-stepper-step" data-status="upcoming">
<span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">3</span><span class="ml-stepper-text"><span class="ml-stepper-label">Payment</span></span><span class="ml-visually-hidden">, not started</span></span>
</li>
<li class="ml-stepper-step" data-status="upcoming">
<span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">4</span><span class="ml-stepper-text"><span class="ml-stepper-label">Review</span><span class="ml-stepper-description">Optional</span></span><span class="ml-visually-hidden">, not started</span></span>
</li>
</ol>
</nav>Options
| Prop | Values | Default |
|---|---|---|
orientation | horizontalvertical | horizontal |
Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.
Classes and attributes
A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.
| Class | Attributes |
|---|---|
ml-stepper | data-orientation="horizontal | vertical" |
ml-stepper-list | — |
ml-stepper-step | data-status="complete | current | error | upcoming" |
ml-stepper-target | — |
ml-stepper-label | — |
ml-stepper-marker | — |
ml-stepper-text | — |
ml-stepper-description | — |
ml-stepper-summary | — |
ml-stepper-meter | — |
Accessibility and theming
- Semantic elements, accessible names and state relationships are part of the contract.
- Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
- Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
- Reduced motion and forced colors keep meaning and operation.
Dependencies
Installed alongside this component. No third-party UI runtime is ever added.
@mlola-ui/icons