Stepper
Shows progress through a multi-step flow. Horizontal for wide forms, Vertical for side panels.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
- Your detailsName and email
- 2CompanyTeam and size
- 3Invite teamStart collaborating
<ol class="px-stepper" style="width:100%">
<li class="px-step px-step--complete"><span class="px-step__dot"><svg class="px-icon" aria-hidden="true">…</svg></span><span class="px-step__title">Your details</span><span class="px-step__sub">Name and email</span></li>
<li class="px-step px-step--current" aria-current="step"><span class="px-step__dot">2</span><span class="px-step__title">Company</span><span class="px-step__sub">Team and size</span></li>
<li class="px-step px-step--upcoming"><span class="px-step__dot">3</span><span class="px-step__title">Invite team</span><span class="px-step__sub">Start collaborating</span></li>
</ol>Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Vertical
- Upload filebrand.fig
- 2Run auditChecking 312 layers
- 3See report
<ol class="px-stepper px-stepper--vertical"><li class="px-step px-step--complete"><span class="px-step__dot"><svg class="px-icon" aria-hidden="true">…</svg></span><span class="px-step__title">Upload file</span><span class="px-step__sub">brand.fig</span></li><li class="px-step px-step--current" aria-current="step"><span class="px-step__dot">2</span><span class="px-step__title">Run audit</span><span class="px-step__sub">Checking 312 layers</span></li><li class="px-step px-step--upcoming"><span class="px-step__dot">3</span><span class="px-step__title">See report</span></li></ol>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-stepper · --vertical | class | Orientation. |
px-step--complete · --current · --upcoming | class | Step state. |
Figma properties
Stepper4 variants · page “Data display”Open
Shows progress through a multi-step flow. Horizontal for wide forms, Vertical for side panels and mobile. RTL runs right-to-left. Mark the current step with aria-current="step".
| Property | Type | Values |
|---|---|---|
| Orientation | Variant | Horizontal Vertical |
| Direction | Variant | LTR RTL |
Stepper / Indicator3 variants · page “Data display”Open
Step status marker used by Stepper.
| Property | Type | Values |
|---|---|---|
| State | Variant | Complete Current Upcoming |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-stepper-complete | color-background-brand-default | #2563eb |
--px-stepper-current-ring | color-border-brand-default | #2563eb |
--px-stepper-current-background | color-background-brand-subtle | #eff6ff |
--px-stepper-upcoming-border | color-border-neutral-strong | #667085 |
--px-stepper-connector | color-border-neutral-default | #eaecf0 |
Accessibility
- Mark the current step with aria-current="step".