FORMS · FORM WIZARD

Icon wizard

The same step engine with an icon per step — icon shape, done style and connector style, plus per-step validation, review and draft saving.
THEME
DENSITY
01

Playground

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

Brief

Goal and message
Step 1 of 4
Settings
ICON SHAPE
WHEN DONE
CONNECTOR
STEPPER
LABELS
NAVIGATION
STEP 2 STATE
ACCESSIBILITY TREE
navaria-label="Progress" → ol
currentli aria-current="step" · Brief
headingh3 tabindex="-1" — focused on step change
statusaria-live: “Step 1 of 4”
CODE
<Wizard stepper="circles" iconShape="circle" done="check" connector="solid" labels="desc" linear={true} onStepChange={saveDraft}> <Step title="Brief" icon={FileText} /> <Step title="Audience" icon={Users} /> <Step title="Channels" icon={Rss} optional /> <Step title="Launch" icon={Rocket} 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

Store integration, project launch
Store integrationconnect → map fields → test → go live

Connect

Step 1 of 4
Campaign launchbrief → audience → budget → launch

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