Onboarding Stepper Patterns

Next Step Preview

A static next-step preview shows current Profile step, Next selected event, new step Invite team, and Preview update status.

Program

A next-step preview can show what would happen after a user action without running a click handler or route.

next_step_preview.html
Visuals: captured from real browser rendering
<section class="next-step" aria-labelledby="next-step-title"><h2 id="next-step-title">Next step preview</h2><div class="step-card" aria-label="Static next step preview"><span>Current: Profile</span><span>Event: Next selected</span><strong>New step: Invite team</strong></div><dl>
  <div><dt>Current step</dt><dd>Profile</dd></div>
  <div><dt>User event</dt><dd>Next selected</dd></div><div><dt>New step</dt><dd>Invite team</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Preview update</span></dd></div></dl>
  <p class="check">Learner check: the event and new step are visible as a static preview, not a live move.</p>
  <p class="note">Static next-step 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>
  .next-step { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #7c3aed; padding: 12px; background: #f5f3ff; }
  .step-card { display: grid; gap: 6px; max-width: 260px; border: 1px solid #7c3aed; background: #ffffff; padding: 10px; }
  .step-card span, .step-card strong { border-radius: 6px; background: #ede9fe; padding: 8px; }
  .step-card strong { outline: 2px solid #7c3aed; }
  .next-step dl { display: grid; gap: 8px; margin: 0; }
  .next-step dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .next-step dt { color: #475569; }
  .next-step dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ede9fe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the next-step preview source.

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

  2. Show the next-step affordance.

    The static card groups the stepper state and action preview.
    The static card groups the stepper state and action preview.

  3. Show the pinned user event.

    The user event row is text only; no click handler runs.
    The user event row is text only; no click handler runs.

  4. Show the pinned new step state.

    The new step row shows the preview update without routing.
    The new step row shows the preview update without routing.

  5. Render preview-update status.

    The status badge is the rendered consequence of the static update.
    The status badge is the rendered consequence of the static update.

  6. Check next-step readback.

    Static markup, visual affordance, user event, state update, rendered status, and no live move.
    Static markup, visual affordance, user event, state update, rendered status, and no live move.
step flow step(1) labels the static source, step(2) shows the visual next-step affordance, step(3) shows the user event, step(4) shows the pinned state update, step(5) shows the rendered consequence, and step(6) checks learner readback with honesty.
next-step readback The section heading names the next step preview surface.
next-step rows Current step, User event, New step, and Status values are exact pinned data.
no live move 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.