FORMS · FORM WIZARD

Numbered wizard

Step-by-step forms with a numbered stepper — per-step validation, optional steps, review with Edit, draft saving and focus that follows the step.
THEME
DENSITY
01

Playground

Stepper style, labels, navigation, step state
PREVIEWStep 1 of 4 · linear

Account

Login details
Step 1 of 4
Settings
STEPPER
LABELS
NAVIGATION
STEP 2 STATE
ACCESSIBILITY TREE
navaria-label="Progress" → ol
currentli aria-current="step" · Account
headingh3 tabindex="-1" — focused on step change
statusaria-live: “Step 1 of 4”
CODE
<Wizard stepper="circles" labels="desc" linear={true} onStepChange={saveDraft}> <Step title="Account" validate={account} /> <Step title="Personal" validate={personal} /> <Step title="Social" optional /> <Step title="Review" review /></Wizard>
02

Variants

Compact, optional step, modal
Compactnarrow widths · progress bar

Details

Project basics
Step 1 of 3
Optional stepSkip without filling it

Company

Step 1 of 3
In a modal3 steps · Invite team
03

States

Step indicator
UPCOMINGCURRENTDONEERRORDISABLEDOPTIONAL32 pxAccountAccountAccountAccountAccountSocial · optional24 px
04

Behavior

Validation, draft, review, keyboard
Rules of the flowwhat each action does
NextValidates the current step only. With errors, focus moves to the first invalid field.
EnterSame as Next inside any single-line field.
BackNever validates and never loses data.
Stepper clickLinear: only reached steps. Free: any step; errors show as “!”.
SkipOptional steps only. Shown as “–” and “Skipped” on Review.
SubmitRe-checks every step and jumps to the first one that still has errors.
Event logfrom the playground
Use Next, Back or the stepper in the playground.
05

In Avava

Client onboarding, project launch
Client onboardingcompany → contact → billing → confirm

Company

Step 1 of 4
Project launchbrief → team → budget → review

Brief

Step 1 of 4
06

Rules & a11y

When to use, focus and announcements
Wizard or one form?split only when it helps
Wizard
8+ fields with natural groupsOnboarding, setup, launches
Wizard
Later steps depend on earlier answersPlan → seats → billing
One form
Under ~8 fieldsContact, invite, sign-in
One form
People need to compare or jump aroundSettings, profiles
Screen readers & focusannounce progress, move focus
✓<nav aria-label="Progress"><ol>Steps are a list; the current one has aria-current="step"
✓Step buttons: “Step 2 of 4: Personal — done”Status in the name, not only in the colour
✓h3 tabindex="-1" gets focusOn every step change, so screen readers start at the top
✓aria-live for “Draft saved”Polite — never interrupts typing
✓Errors: aria-invalid + aria-describedbyFocus lands on the first invalid field
DO✓Keep it to 3–6 steps with clear names✓Validate one step at a time✓Let Back keep everything people typed✓End with a Review that links to each step✓Save a draft on every step
DON’T✕Split a 6-field form into a wizard✕Lock the stepper so people can’t go back✕Validate future steps before people reach them✕Hide the total number of steps✕Lose data when someone uses the stepper