Segmented Stepper

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

Customise it with AI

Open Segmented 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.