Design Atlas
한국어
▣ UI components

Stepper

스테퍼

A row of numbered, connected steps showing which stage of a multi-step task you are on.

Also known as: Step indicatorWizard stepsProgress steps
···
html
<ol class="stp">
  <li data-state="done"><span class="num">✓</span>배송지</li>
  <li data-state="current"><span class="num">2</span>결제</li>
  <li data-state="upcoming"><span class="num">3</span>완료</li>
</ol>
css
.stp{list-style:none;display:flex;margin:0;padding:0;width:min(280px,90%)}
.stp li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.stp li:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--line)}
.stp li[data-state=done]:not(:last-child)::after{background:var(--accent)}
.num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--line);color:var(--muted);border:2px solid transparent;transition:background .25s,color .25s}
[data-state=current] .num{background:var(--surface);color:var(--accent);border-color:var(--accent)}
[data-state=done] .num{background:var(--accent);color:#fff}
[data-state=current]{color:var(--fg);font-weight:700}
js
const items = [...document.querySelectorAll('.stp li')];
function paint(cur) {
  items.forEach((li, i) => {
    li.dataset.state = i < cur ? 'done' : i === cur ? 'current' : 'upcoming';
    li.querySelector('.num').textContent = i < cur ? '✓' : String(i + 1);
  });
}
let cur = 1;
paint(cur);
setInterval(() => { cur = (cur + 1) % (items.length + 1); paint(cur); }, 1600);

Each step is in one of three states — done, current, upcoming — usually shown with a checkmark, an accent color, and a muted color respectively. Mark the current step with aria-current="step" so a screen reader can announce "you are here."

It differs from a progress bar in being discrete — a progress bar represents any continuous value from 0–100%, while a stepper only moves between a handful of named, fixed stages: "Shipping → Payment → Done." It differs from breadcrumbs in direction — breadcrumbs show a hierarchy you've already navigated and let you jump back up at any time, while a stepper usually represents a process that only moves forward through a fixed order.

Whether a completed step can be clicked to go back depends on the process — after payment completes, you usually can't return to an earlier step.