Progress Stepper

Features

• Coherent four-step setup narrative with a real form per step: Account → Workspace → Preferences → Review & launch
• Step 1 collects name, work email and password with native constraint validation and inline error messages
• Step 2 collects workspace name, a prefixed workspace URL slug, team size and timezone selects
• Step 3 offers a default-role radio group styled as selectable cards plus two notification switches
• Step 4 renders a live review summary built from the entered values and a required terms checkbox
• Continue validates the current step before advancing; invalid fields get aria-invalid, an inline message and focus
• Segmented progress bar with one labelled segment per step; fills animate via transform: scaleX
• Completed segments swap their number for a check and become clickable to revisit earlier steps
• Live percentage and "Step X of N" readouts plus a polite role="status" announcement on every change
• Launching runs a mocked async backend submission: the button enters a busy "Launching…" state with a spinner while the form and nav lock against double-submit
• A success panel with an animated check disc confirms launch and interpolates the returned workspace id, URL and email
• Primary button relabels contextually: Continue → Launch workspace → Launching… → Start over
• Focus moves to the active step heading on navigation; arrow keys navigate outside form fields
• Fully respects prefers-reduced-motion and adapts down to 320px

Accessibility

Current step

aria-current="step" set on the active segment and moved/cleared as the step changes

Live readout

role="status" with aria-live="polite" announces "Step X of N: <title>" and completion

Step semantics

Each step is a <fieldset> with a visually hidden <legend> naming the step

Form labels

Every input, select, radio and switch has an associated <label>; hints and errors are linked via aria-describedby

Validation

Invalid fields get aria-invalid="true", a visible inline message and focus on submit

Radio group

role="radiogroup" labelled by the group heading; native radios keep arrow-key behavior

Completed steps

Rendered as enabled buttons with a descriptive aria-label, clickable to revisit an earlier step

Focus management

Focus moves to the active step heading (tabindex="-1") after navigation

Keyboard navigation

Arrow Left/Right move between steps outside form fields; Enter submits the current step

Button labels

Back and Continue carry explicit, state-aware aria-labels

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Progress Stepper in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.