Onboarding Stepper Patterns

Stepper Position

A static onboarding stepper shows Workspace setup, Step 2 of 4, current step Profile, and Stepper preview status.

Program

A stepper position summary helps beginners show where someone is in setup without saving live progress.

stepper_position_summary.html
Visuals: captured from real browser rendering
<section class="stepper-position" aria-labelledby="stepper-position-title"><h2 id="stepper-position-title">Stepper position summary</h2><div class="stepper" aria-label="Static onboarding stepper"><span>1 Account</span><strong aria-current="step">2 Profile</strong><span>3 Invite</span><span>4 Finish</span></div><dl>
  <div><dt>Flow</dt><dd>Workspace setup</dd></div>
  <div><dt>Progress</dt><dd>Step 2 of 4</dd></div><div><dt>Current step</dt><dd>Profile</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Stepper preview</span></dd></div></dl>
  <p class="check">Learner check: static markup, visible stepper, preview event, preview state, and rendered status are all pinned.</p>
  <p class="note">Static onboarding stepper preview only; no framework, stepper engine, click handler, keyboard handler, route change, account setup service, progress save, storage, cookie, API, network, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live onboarding progress, live navigation, or live submission runs.</p></section>
<style>
  .stepper-position { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 32rem; }
  .stepper span, .stepper strong { border-radius: 6px; background: #ccfbf1; padding: 8px; text-align: center; }
  .stepper strong { outline: 2px solid #0f766e; }
  .stepper-position dl { display: grid; gap: 8px; margin: 0; }
  .stepper-position dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .stepper-position dt { color: #475569; }
  .stepper-position dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the stepper position source.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the stepper affordance.

    The visible stepper shows the setup steps as static labels.
    The visible stepper shows the setup steps as static labels.

  3. Show the pinned setup flow row.

    The flow row gives the event context without a real event.
    The flow row gives the event context without a real event.

  4. Show the pinned progress state.

    The progress row shows the current state without saving progress.
    The progress row shows the current state without saving progress.

  5. Render stepper-preview status.

    The status badge is the rendered consequence of the pinned state.
    The status badge is the rendered consequence of the pinned state.

  6. Check stepper position honesty.

    Static markup, visual stepper, preview event, state, rendered status, and no live progress.
    Static markup, visual stepper, preview event, state, rendered status, and no live progress.
step flow step(1) labels the static source, step(2) shows the visual stepper affordance, step(3) shows the preview event row, step(4) shows the pinned state update, step(5) shows the rendered consequence, and step(6) checks learner readback with honesty.
stepper readback The section heading names the stepper position summary surface.
position rows Flow, Progress, Current step, and Status values are exact pinned data.
no live progress The lesson should not imply frameworks, stepper engines, click handlers, keyboard handlers, route changes, account setup services, progress saves, storage, cookies, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live onboarding progress, live navigation, or live submissions.