14 Material Design CSS Components 09 / 14

Material Design Stepper CSS

Horizontal step indicator with done/active/error states, vertical accordion stepper, and a linear checkout stepper — built entirely with CSS counter and radio-hack.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="md-09">
  <div class="md-09__wrap">
    <div class="md-09__page-title">Material Design Steppers CSS</div>
    <div class="md-09__page-sub">Horizontal, vertical and linear checkout steppers — state indicators, connectors and panel content</div>

    <!-- Horizontal Stepper -->
    <div class="md-09__card">
      <div class="md-09__card-title">Horizontal Stepper — Order Progress</div>
      <div class="md-09__hstep">
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Cart</div><div class="md-09__step-sub">Completed</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Shipping</div><div class="md-09__step-sub">Completed</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--active">
          <div class="md-09__step-circle">3</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Payment</div><div class="md-09__step-sub">In progress</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">4</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Review</div><div class="md-09__step-sub">Pending</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">5</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Confirm</div><div class="md-09__step-sub">Pending</div></div>
        </div>
      </div>
      <div class="md-09__step-content">
        <div class="md-09__step-content-title">Step 3 — Payment Details</div>
        <div class="md-09__step-content-body">Enter your payment method. All transactions are secured with 256-bit SSL encryption. We accept Visa, Mastercard, American Express and PayPal.</div>
      </div>
      <div class="md-09__step-actions">
        <button class="md-09__btn md-09__btn--ghost">← Back</button>
        <button class="md-09__btn md-09__btn--p">Continue →</button>
      </div>
    </div>

    <!-- Horizontal with Error -->
    <div class="md-09__card">
      <div class="md-09__card-title">Horizontal Stepper — With Error State</div>
      <div class="md-09__hstep">
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Upload</div><div class="md-09__step-sub">Done</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--error">
          <div class="md-09__step-circle">!</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Validate</div><div class="md-09__step-sub">Error</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">3</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Process</div><div class="md-09__step-sub">Waiting</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">4</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Publish</div><div class="md-09__step-sub">Waiting</div></div>
        </div>
      </div>
      <div class="md-09__step-content" style="border-color:#ffcdd2;background:#fff8f8">
        <div class="md-09__step-content-title" style="color:#c62828">⚠ Validation Failed</div>
        <div class="md-09__step-content-body">3 columns in your CSV are missing required values. Please fix the errors and re-upload your file.</div>
      </div>
      <div class="md-09__step-actions">
        <button class="md-09__btn md-09__btn--ghost">← Back</button>
        <button class="md-09__btn md-09__btn--p" style="background:#c62828">Fix Errors</button>
      </div>
    </div>

    <!-- Vertical Stepper -->
    <div class="md-09__card">
      <div class="md-09__card-title">Vertical Stepper (Accordion)</div>
      <div class="md-09__vstep">
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v1" checked>
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v1">1</label>
            <div class="md-09__vstep-connector"></div>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v1">Account Information</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Provide your name, email and password to create your account. We'll send a verification email once you submit.</p>
                <div style="margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
                  <div class="md-09__field"><label>First Name</label><input type="text" placeholder="Alex"></div>
                  <div class="md-09__field"><label>Last Name</label><input type="text" placeholder="Thompson"></div>
                  <div class="md-09__field" style="grid-column:1/-1"><label>Email</label><input type="email" placeholder="[email protected]"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v2">
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v2">2</label>
            <div class="md-09__vstep-connector"></div>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v2">Choose Your Plan</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Select the plan that best fits your needs. You can upgrade or downgrade at any time.</p>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px">
                  <div style="border:2px solid var(--divider);border-radius:8px;padding:12px;text-align:center"><div style="font-weight:700">Free</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0">$0</div><div style="font-size:.75rem;color:var(--ink2)">5 projects</div></div>
                  <div style="border:2px solid var(--primary);border-radius:8px;padding:12px;text-align:center;background:rgba(230,81,0,.06)"><div style="font-weight:700;color:var(--primary)">Pro ★</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0;color:var(--primary)">$12</div><div style="font-size:.75rem;color:var(--ink2)">Unlimited</div></div>
                  <div style="border:2px solid var(--divider);border-radius:8px;padding:12px;text-align:center"><div style="font-weight:700">Team</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0">$49</div><div style="font-size:.75rem;color:var(--ink2)">20 seats</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v3">
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v3">3</label>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v3">Confirm &amp; Launch</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Review your selections and confirm. Your workspace will be ready in seconds.</p>
                <button class="md-09__btn md-09__btn--p" style="margin-top:12px">🚀 Create Account</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Checkout Stepper -->
    <div class="md-09__card" style="padding:0;overflow:hidden">
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co1" checked>
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co2">
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co3">
      <div class="md-09__checkout-steps">
        <label class="md-09__checkout-step-lbl md-09__cslbl-1" for="md09co1">1 · Shipping</label>
        <label class="md-09__checkout-step-lbl md-09__cslbl-2" for="md09co2">2 · Payment</label>
        <label class="md-09__checkout-step-lbl md-09__cslbl-3" for="md09co3">3 · Review</label>
      </div>
      <div class="md-09__checkout-panels">
        <div class="md-09__checkout-panel md-09__cpanel-1">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Shipping Address</div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>First Name</label><input type="text" placeholder="Alex"></div>
            <div class="md-09__field"><label>Last Name</label><input type="text" placeholder="Thompson"></div>
          </div>
          <div class="md-09__field"><label>Address Line 1</label><input type="text" placeholder="123 Main Street"></div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>City</label><input type="text" placeholder="San Francisco"></div>
            <div class="md-09__field"><label>ZIP</label><input type="text" placeholder="94102"></div>
          </div>
          <div style="text-align:right;margin-top:8px"><label class="md-09__btn md-09__btn--p" for="md09co2" style="cursor:pointer;display:inline-flex;align-items:center">Next: Payment →</label></div>
        </div>
        <div class="md-09__checkout-panel md-09__cpanel-2">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Payment Details</div>
          <div class="md-09__field"><label>Card Number</label><input type="text" placeholder="4111 1111 1111 1111"></div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>Expiry</label><input type="text" placeholder="MM / YY"></div>
            <div class="md-09__field"><label>CVC</label><input type="text" placeholder="123"></div>
          </div>
          <div style="display:flex;justify-content:space-between;margin-top:8px">
            <label class="md-09__btn md-09__btn--ghost" for="md09co1" style="cursor:pointer;display:inline-flex;align-items:center">← Back</label>
            <label class="md-09__btn md-09__btn--p" for="md09co3" style="cursor:pointer;display:inline-flex;align-items:center">Next: Review →</label>
          </div>
        </div>
        <div class="md-09__checkout-panel md-09__cpanel-3">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Order Review</div>
          <div style="background:#fff8f0;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid var(--divider)">
            <div style="display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink2);margin-bottom:8px"><span>Aurora Pro (12 months)</span><span>$144.00</span></div>
            <div style="display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink2);margin-bottom:8px"><span>Shipping</span><span>Free</span></div>
            <div style="height:1px;background:var(--divider);margin:8px 0"></div>
            <div style="display:flex;justify-content:space-between;font-weight:700;color:var(--primary)"><span>Total</span><span>$144.00</span></div>
          </div>
          <div style="display:flex;justify-content:space-between;margin-top:8px">
            <label class="md-09__btn md-09__btn--ghost" for="md09co2" style="cursor:pointer;display:inline-flex;align-items:center">← Back</label>
            <button class="md-09__btn md-09__btn--p">✓ Place Order</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.md-09,.md-09 *,.md-09 *::before,.md-09 *::after{box-sizing:border-box;margin:0;padding:0}
.md-09 ::selection{background:#e65100;color:#fff}
.md-09{
  --primary:#e65100;
  --primary-l:#ff8a65;
  --success:#2e7d32;
  --surface:#fff;
  --bg:#fff3e0;
  --ink:#212121;
  --ink2:#546e7a;
  --ink3:#90a4ae;
  --divider:#ffcc80;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-09__wrap{max-width:860px;margin:0 auto}
.md-09__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-09__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}
.md-09__card{background:var(--surface);border-radius:12px;padding:32px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.md-09__card-title{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:28px}

/* ── HORIZONTAL STEPPER ── */
.md-09__hstep{
  display:flex;align-items:flex-start;position:relative;
  margin-bottom:32px;
}
/* connector lines between steps */
.md-09__hstep-item{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.md-09__hstep-item:not(:last-child)::after{
  content:'';position:absolute;
  top:20px;left:50%;right:-50%;
  height:2px;background:var(--divider);z-index:0;
}
.md-09__hstep-item--done:not(:last-child)::after{background:var(--success)}
.md-09__hstep-item--active:not(:last-child)::after{background:linear-gradient(to right,var(--primary),var(--divider))}

/* step circle */
.md-09__step-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:700;
  border:2px solid var(--divider);background:var(--surface);
  color:var(--ink3);position:relative;z-index:1;
  transition:all .25s;flex-shrink:0;
}
.md-09__hstep-item--done .md-09__step-circle{background:var(--success);border-color:var(--success);color:#fff}
.md-09__hstep-item--active .md-09__step-circle{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(230,81,0,.2)}
.md-09__hstep-item--error .md-09__step-circle{background:#c62828;border-color:#c62828;color:#fff}

.md-09__step-label{margin-top:10px;text-align:center;padding:0 4px}
.md-09__step-name{font-size:.8rem;font-weight:500;color:var(--ink);line-height:1.3}
.md-09__hstep-item--done .md-09__step-name{color:var(--success)}
.md-09__hstep-item--active .md-09__step-name{color:var(--primary);font-weight:700}
.md-09__hstep-item--error .md-09__step-name{color:#c62828}
.md-09__step-sub{font-size:.72rem;color:var(--ink3);margin-top:2px}

/* ── CONTENT PANEL ── */
.md-09__step-content{
  border:1px solid var(--divider);border-radius:8px;padding:24px;margin-bottom:20px;
  background:#fffef9;
}
.md-09__step-content-title{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--ink)}
.md-09__step-content-body{font-size:.9rem;line-height:1.7;color:var(--ink2)}
.md-09__step-actions{display:flex;gap:12px;justify-content:flex-end}
.md-09__btn{
  height:36px;padding:0 20px;border:none;border-radius:4px;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  transition:box-shadow .15s;
}
.md-09__btn--p{background:var(--primary);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.md-09__btn--p:hover{box-shadow:0 4px 8px rgba(0,0,0,.25)}
.md-09__btn--ghost{background:transparent;color:var(--primary);border:1px solid rgba(230,81,0,.4)}

/* ── VERTICAL STEPPER (checkbox-hack) ── */
.md-09__vstep{display:flex;flex-direction:column}
.md-09__vstep-in{display:none}
.md-09__vstep-item{display:flex;gap:0;position:relative}
.md-09__vstep-left{display:flex;flex-direction:column;align-items:center;width:48px;flex-shrink:0}
.md-09__vstep-circle{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  background:var(--surface);border:2px solid var(--divider);color:var(--ink3);
  flex-shrink:0;cursor:pointer;z-index:1;
  transition:all .2s;
}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-circle{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 3px rgba(230,81,0,.2)}
.md-09__vstep-connector{width:2px;flex:1;background:var(--divider);margin:4px 0;min-height:24px}
.md-09__vstep-body{flex:1;padding-bottom:24px}
.md-09__vstep-head{display:flex;align-items:center;gap:12px;min-height:32px}
.md-09__vstep-title{font-size:.95rem;font-weight:500;cursor:pointer;user-select:none;color:var(--ink2)}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-title{color:var(--primary);font-weight:700}
.md-09__vstep-panel{overflow:hidden;max-height:0;transition:max-height .3s ease}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-panel{max-height:400px}
.md-09__vstep-panel-inner{padding:12px 0;font-size:.88rem;color:var(--ink2);line-height:1.7}

/* ── LINEAR CHECKOUT STEPS (radio) ── */
.md-09__checkout{
  position:relative;overflow:hidden;
}
.md-09__checkout-in{display:none}
.md-09__checkout-steps{display:flex;background:var(--primary);padding:0 16px}
.md-09__checkout-step-lbl{
  flex:1;height:52px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.6);cursor:pointer;position:relative;
  transition:color .2s;user-select:none;
}
.md-09__checkout-step-lbl::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#fff;transform:scaleX(0);transition:transform .25s}
#md09co1:checked ~ .md-09__checkout-steps .md-09__cslbl-1,
#md09co2:checked ~ .md-09__checkout-steps .md-09__cslbl-2,
#md09co3:checked ~ .md-09__checkout-steps .md-09__cslbl-3{color:#fff}
#md09co1:checked ~ .md-09__checkout-steps .md-09__cslbl-1::after,
#md09co2:checked ~ .md-09__checkout-steps .md-09__cslbl-2::after,
#md09co3:checked ~ .md-09__checkout-steps .md-09__cslbl-3::after{transform:scaleX(1)}
.md-09__checkout-panels{padding:24px}
.md-09__checkout-panel{display:none}
#md09co1:checked ~ .md-09__checkout-panels .md-09__cpanel-1,
#md09co2:checked ~ .md-09__checkout-panels .md-09__cpanel-2,
#md09co3:checked ~ .md-09__checkout-panels .md-09__cpanel-3{display:block}
.md-09__field{margin-bottom:16px}
.md-09__field label{font-size:.78rem;color:var(--ink2);display:block;margin-bottom:4px}
.md-09__field input,.md-09__field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--divider);border-radius:4px;font-family:'Roboto';font-size:.875rem;outline:none;transition:border-color .15s}
.md-09__field input:focus,.md-09__field select:focus{border-color:var(--primary)}
.md-09__field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

@media(prefers-reduced-motion:reduce){.md-09 *{transition:none!important;animation:none!important}}

How this works

Step numbers are generated by CSS counter(step) — the wrapper sets counter-reset: step and each step increments it with counter-increment: step, so the circle badge always shows the correct number without hard-coded HTML. Completed steps replace the number with a checkmark by hiding the ::before counter content and showing a ::after tick via the .step--done class.

The vertical accordion stepper extends this with hidden radio inputs: the active step's content panel expands from max-height: 0 to max-height: 600px on :checked. The connector line between steps uses a 2px left border on the step body element, colour-coded green for completed and grey for pending.

Customize

  • Add step labels below the circle by inserting a <span class='step-label'> and positioning it with position: absolute; top: 44px.
  • Change the connector line style to dashed by editing border-left-style: dashed on the step body connector pseudo.
  • Add an error state by applying .step--error which swaps the circle to --error: #b3261e and shows an exclamation icon.
  • Make the horizontal stepper responsive by adding a breakpoint that collapses it to a vertical layout below 480px viewport width.
  • Animate panel open speed by changing transition: max-height 300ms to 400ms cubic-bezier(.4,0,.2,1) for the standard Material easing curve.

Watch out for

  • max-height animation requires a known upper bound — set it larger than the tallest possible panel content, or the animation clips at the defined max.
  • CSS counters reset per formatting context — if step wrappers are in different stacking contexts the counter restarts; keep all steps as direct children of the counter-reset element.
  • The error state icon (exclamation) must be manually toggled via a class — pure CSS cannot dynamically detect form validation errors without JavaScript.

Browser support

ChromeSafariFirefoxEdge
88+ 14+ 89+ 88+

CSS counter() is supported in all modern browsers including IE 8+; no polyfills needed.

More from 14 Material Design CSS Components

Material Design Dialog Modal CSSMaterial Design Data Table CSSMaterial Design Tabs CSSMaterial Design Chip CSSMaterial Design Tooltip CSSMaterial Design Expansion Panel CSSMaterial Design List CSSMaterial Design Color Palette CSSMaterial Design App Shell Layout CSSMaterial Design Buttons CSSMaterial Design Card CSSMaterial Design Navigation CSS
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →