Save an in-progress form

Allow your end users to pick up where they left off

Use this pattern when a multi-step form should remember the user's progress after refresh or return visits.

Save both the current step and the current form values to app state.

Build the form

  1. Add a create form
  2. Split it into multiple form steps
  3. Add back and next buttons for navigation

Save progress

  1. Update the step value in app state when the user moves between steps
  2. Persist the step value
  3. Save the current form values to a separate state key
  4. Persist the form values

Restore progress

  1. Bind the form's initial step to the saved step state
  2. Bind each field's default value to the saved form state
  3. Clear the saved state after submission

Why this works

The step state restores where the user was, and the form value state restores the entered values.

App export


Did this page help you?