Browse Components
Stepper
Show progress through a sequence of steps.
Basic
Show completed, current and upcoming steps without interactive controls.
View Code
<nav class="stepper" aria-label="Setup progress">
<ol class="stepper-list">
<li class="stepper-item" data-complete>
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
1
</span>
<span class="stepper-label">
<strong>
Account
</strong>
<span class="sr-only">
Completed.
</span>
<span class="stepper-description">
Your sign-in details
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step" aria-current="step">
<span class="stepper-marker" aria-hidden="true">
2
</span>
<span class="stepper-label">
<strong>
Profile
</strong>
<span class="stepper-description">
Tell us about yourself
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
3
</span>
<span class="stepper-label">
<strong>
Review
</strong>
<span class="stepper-description">
Check and finish
</span>
</span>
</span>
</li>
</ol>
</nav>Vertical
A vertical sequence for sidebars and longer descriptions.
View Code
<nav class="stepper stepper-vertical" aria-label="Setup progress">
<ol class="stepper-list">
<li class="stepper-item" data-complete>
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
1
</span>
<span class="stepper-label">
<strong>
Account
</strong>
<span class="sr-only">
Completed.
</span>
<span class="stepper-description">
Your sign-in details
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step" aria-current="step">
<span class="stepper-marker" aria-hidden="true">
2
</span>
<span class="stepper-label">
<strong>
Profile
</strong>
<span class="stepper-description">
Tell us about yourself
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
3
</span>
<span class="stepper-label">
<strong>
Review
</strong>
<span class="stepper-description">
Check and finish
</span>
</span>
</span>
</li>
</ol>
</nav>Unavailable step
Keep a future step unavailable until its requirements are met.
View Code
<nav class="stepper" aria-label="Choose a setup step" data-stepper>
<ol class="stepper-list">
<li class="stepper-item" data-complete>
<button class="stepper-step" type="button" data-step="1">
<span class="stepper-marker" aria-hidden="true">
1
</span>
<span class="stepper-label">
<strong>
Account
</strong>
<span class="sr-only">
Completed.
</span>
<span class="stepper-description">
Your sign-in details
</span>
</span>
</button>
</li>
<li class="stepper-item">
<button class="stepper-step" type="button" data-step="2" aria-current="step">
<span class="stepper-marker" aria-hidden="true">
2
</span>
<span class="stepper-label">
<strong>
Profile
</strong>
<span class="stepper-description">
Tell us about yourself
</span>
</span>
</button>
</li>
<li class="stepper-item">
<button class="stepper-step" type="button" data-step="3" disabled>
<span class="stepper-marker" aria-hidden="true">
3
</span>
<span class="stepper-label">
<strong>
Review
</strong>
<span class="stepper-description">
Check and finish
</span>
</span>
</button>
</li>
</ol>
</nav>Right-to-left
Progress follows the reading direction.
View Code
<div dir="rtl" lang="he">
<nav class="stepper" aria-label="התקדמות ההגדרה">
<ol class="stepper-list">
<li class="stepper-item" data-complete>
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
1
</span>
<span class="stepper-label">
<strong>
חשבון
</strong>
<span class="sr-only">
הושלם.
</span>
<span class="stepper-description">
פרטי ההתחברות שלכם
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step" aria-current="step">
<span class="stepper-marker" aria-hidden="true">
2
</span>
<span class="stepper-label">
<strong>
פרופיל
</strong>
<span class="stepper-description">
ספרו לנו על עצמכם
</span>
</span>
</span>
</li>
<li class="stepper-item">
<span class="stepper-step">
<span class="stepper-marker" aria-hidden="true">
3
</span>
<span class="stepper-label">
<strong>
סקירה
</strong>
<span class="stepper-description">
בדקו וסיימו
</span>
</span>
</span>
</li>
</ol>
</nav>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/stepper.css">
<script defer src="/library/assets/stepper.js"></script>11,166 bytes CSS including base · 1,469 bytes runtime JavaScript
Usage
Progress and completion
Use an ordered list, one aria-current=step, and explicit completed text alongside data-complete. Step selection does not mark a step complete. Use status-only spans when steps are not navigable.
Application-owned navigation
For routed steps use native links. Optional button navigation emits cancelable stepper:change before updating aria-current. Applications own validation, content panels, completed states and persistence. Horizontal steppers become vertical on mobile; stepper-vertical stays vertical at every size.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.