FORMS · FORM WIZARD

Vertical wizard

A step list on the left, the step on the right — for 5–7 steps with labels and status. Sticky column, ↑ ↓ keys, and a top bar or a step select on narrow screens.
THEME
DENSITY
01

Playground

Marker, sub-text, column width, narrow layout, navigation
PREVIEWStep 1 of 6

Profile

Studio name and logo
Step 1 of 6
Settings
MARKER
UNDER THE TITLE
STEPPER COLUMN
ON NARROW SCREENS
NAVIGATION
CODE
<Wizard orientation="vertical" marker="num" stepDetail="status" railWidth={240} narrowLayout="bar" linear={true}> <Step title="Profile" /> … <Step title="Review" review /></Wizard>
02

Variants

Accordion wizard, sub-steps with progress
Accordion wizarddone steps collapse to a summary

  1. Profile

    Studio name
    Step 1 of 4
With sub-steps and progress60% complete · nested items

Checks

Links, spelling, sizes
Step 1 of 4
03

States

Step row
UpcomingOptional
Current2 fields left
Done✓ Done
ErrorNeeds attention
SkippedSkipped
LockedFinish step 2 first
04

Behavior

Flow rules
Flow rulessame engine as Numbered
Next / EnterValidates the current step; focus goes to the first invalid field or to the new step heading.
BackNever validates, never loses data.
Step listLinear: only reached steps. Free: any step. ↑ ↓ move between steps.
Sticky columnThe list stays in view while a long step scrolls.
Narrow screensBelow 640 px the list becomes a top progress bar or a step select.
ReviewEdit jumps to a step; Submit re-checks all steps.
05

In Avava

Release checklist
Release checklistChecks → Assets → Approvals → Publish

Checks

Links, spelling, sizes
Step 1 of 4
06

Rules & a11y

When to go vertical, screen readers
Vertical or horizontal?step count and labels decide
Vertical
5–7 steps, long labelsSetup, releases, onboarding
Vertical
Steps need status lines“2 fields left”, “Needs attention”
Horizontal
3–4 short stepsCheckout, invite
Horizontal
Narrow or mobileOr a top bar with “2 / 4”
Screen readers & keyboardlist semantics, moving focus
✓<nav aria-label="Progress"><ol>aria-current="step" on the current item
✓Status in the button name“Step 3 of 6: Billing — needs attention”
✓↑ ↓ between step buttonsEnter opens a step; Tab leaves the list
✓h3 tabindex="-1" gets focusOn every step change
✓Narrow: <select> fallbackNative, labelled “Choose step”
DO✓Use vertical for 5+ steps or long labels✓Show a status line under each step✓Keep the step list sticky✓Switch to a top bar or select on narrow screens✓Let people jump back from Review
DON’T✕Put 2–3 steps in a vertical rail✕Truncate step titles✕Hide progress on mobile✕Let the rail scroll away on long steps✕Rely on colour alone for step status