Stepper

Horizontal

Add .stepper-horizontal for a directional horizontal layout from md; smaller screens stack vertically.

1. 1
   Details

   Completed

2. 2
   Preferences

   Current step

3. 3
   Review

   Upcoming

<ol class="stepper stepper-horizontal" role="list" aria-label="Setup progress">
	<li class="stepper-item is-completed">
		<span class="stepper-marker" aria-hidden="true">1</span>
		<div class="stepper-content">
			<strong class="stepper-label">Details</strong>
			<p class="stepper-status">Completed</p>
		</div>
	</li>
	<li class="stepper-item" aria-current="step">
		<span class="stepper-marker" aria-hidden="true">2</span>
		<div class="stepper-content">
			<strong class="stepper-label">Preferences</strong>
			<p class="stepper-status">Current step</p>
		</div>
	</li>
	<li class="stepper-item">
		<span class="stepper-marker" aria-hidden="true">3</span>
		<div class="stepper-content">
			<strong class="stepper-label">Review</strong>
			<p class="stepper-status">Upcoming</p>
		</div>
	</li>
</ol>

Vertical states

The base layout is vertical. Visible state text avoids color-only meaning.

1. 1
   Account

   Completed

2. 2
   Profile

   Current step · Error: check the supplied details

3. 3
   Notifications

   Upcoming · Optional

4. 4
   Finish

   Upcoming

<ol class="stepper" role="list" aria-label="Form progress">
	<li class="stepper-item is-completed">
		<span class="stepper-marker" aria-hidden="true">1</span>
		<div class="stepper-content">
			<strong class="stepper-label">Account</strong>
			<p class="stepper-status">Completed</p>
		</div>
	</li>
	<li class="stepper-item is-error" aria-current="step">
		<span class="stepper-marker" aria-hidden="true">2</span>
		<div class="stepper-content">
			<strong class="stepper-label">Profile</strong>
			<p class="stepper-status">Current step · Error: check the supplied details</p>
		</div>
	</li>
	<li class="stepper-item">
		<span class="stepper-marker" aria-hidden="true">3</span>
		<div class="stepper-content">
			<strong class="stepper-label">Notifications</strong>
			<p class="stepper-status">Upcoming · Optional</p>
		</div>
	</li>
</ol>

Usage

• Use an accessibly named ordered list.
• Use aria-current="step", .is-completed and .is-error as needed.
• Keep status text visible; markers are decorative.
• Use links or buttons only for navigable steps.

Applications manage state, validation and focus. See Checkout and Onboarding.

CSS Variables

--stepper-gap: var(--spacer-3);
--stepper-item-gap: var(--spacer-4);
--stepper-marker-size: 2.25rem;
--stepper-marker-font-size: var(--font-size-sm);
--stepper-color: var(--text-color);
--stepper-muted-color: var(--text-muted);
--stepper-bg: var(--bg-surface);
--stepper-border-color: var(--control-border-color);
--stepper-connector-color: var(--border-color);
--stepper-connector-width: 0.1875rem;
--stepper-current-bg: var(--primary);
--stepper-current-color: var(--on-primary);
--stepper-current-surface: var(--bg-highlight);
--stepper-current-ring-size: 0.1875rem;
--stepper-completed-bg: var(--success);
--stepper-completed-color: var(--on-success);
--stepper-error-bg: var(--error);
--stepper-error-color: var(--on-error);
--stepper-content-padding: var(--spacer-3);
--stepper-content-radius: var(--border-radius);