# Segmented Stepper

> A premium token-driven segmented-bar stepper: a live header with step title and progress, gradient-filled segment bars, numbered nodes with done/active/pending states and micro-animations, per-step status text, and Back/Continue controls — themed by the AI Steppers design system in light and dark.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, wizard
- Page: https://builder.atheros.ai/components/segmented-stepper
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_segmented_stepper/preview-91075adf320e.webp

## Features

- Live header pairs an eyebrow, the current step title, and a one-line hint with a large step counter and progress percentage
- Row of four rounded segment bars that fill with the brand gradient as steps complete (animated via `transform: scaleX`)
- Numbered nodes below each bar resolve to a filled check on completion, a ringed accent node while active, and a hollow node when pending
- Per-segment status microcopy reads Complete / In progress / Pending and recolours with state
- Active segment shows a half gradient fill, a glowing leading tip, and a steady accent node ring
- Clickable segments jump straight to any stage and re-render all states
- Back / Continue controls advance the flow; Continue becomes Finish on the last step and Back disables on the first
- Visually-hidden live region announces "Step X of N" to assistive technology
- `aria-current="step"` tracks the active segment for screen readers
- Arrow-key navigation moves forward and backward through the wizard
- DS-token driven — retones and stays WCAG AA across design systems in light and dark
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Current step** — `aria-current="step"` set on the active segment element
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces "Step X of N"
- **Step group semantics** — `role="group"` with `aria-label="Setup steps"` on the stepper container
- **Clickable segments** — Each segment is a native `<button>` with an explicit `aria-label`
- **Keyboard navigation** — Arrow Left/Right move between steps
- **Button labels** — Every segment and nav button has an explicit `aria-label`
- **Nav controls** — Back disables on the first step; Continue relabels to Finish on the last
- **Focus indicators** — `:focus-visible` with `--ring` outline on the segment bars and nav buttons
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Advance to the next step
- `ArrowLeft` — Return to the previous step
- `Enter` — Activate the focused segment or nav button
- `Space` — Activate the focused segment or nav button
- `Tab` — Move focus between the segments and the Back/Continue buttons

## Common questions

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

Segmented 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 Segmented Stepper navigation component free?**

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

**Does Segmented Stepper support dark mode?**

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

## Get the code

Preview Segmented 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/segmented-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