# Progress Stepper

> A token-driven four-step workspace-setup wizard: labelled progress segments stay in sync with a real form on every step — account details, workspace settings, team preferences and a review summary — with per-step validation, revisitable completed steps, a polite live readout and a success state.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, progress, form
- Page: https://builder.atheros.ai/components/progress-stepper
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_progress_stepper/preview-30286a50d392.webp

## 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-label`s
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Validate and advance to the next step (outside form fields)
- `ArrowLeft` — Return to the previous step (outside form fields)
- `Enter` — Submit the current step from any field
- `Space` — Toggle the focused switch, radio or checkbox
- `Tab` — Move focus through fields and controls

## Common questions

**Which frameworks is Progress Stepper available in?**

Progress Stepper ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Progress Stepper navigation component free?**

Progress Stepper is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Progress Stepper support dark mode?**

Yes. Progress Stepper ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Progress Stepper live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/progress-stepper

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt