Multi Step Form Panel
Three step form shown mid flight at the Configuration step with autosave reassurance in the footer.
Three step form shown mid flight at the Configuration step with autosave reassurance in the footer.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Multi Step Form Panel shows a three-step form mid-flight: Details done (filled circle with a check), Configuration current (outlined circle, bold label), Review upcoming (muted). The visible step body is Configuration for the Checkout Redesign project: environment name Input, production branch Input with the note that pushes to other branches create preview deploys, an auto-deploy Switch row, and a Node version Select defaulting to 20 LTS.
Steps are a const array with name and state fields. The footer autosave line, steps save as you go, leaving is safe, earns user trust before they tab away.
Reach for this block in any multi-step creation or setup flow, persisting each step to your draft endpoint so the autosave promise is true. Wire the stepper header to your router state so the back button works without a full reload.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a project or environment setup wizard. Other multi-step flows:
Tip: the connector line between steps hides below sm on purpose; on mobile just show the active step label.