Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You're a Wizard Form, Harry.

You're a Wizard Form, Harry.

A demonstration of how to use an XState state machine to manage which page the user is on in a wizard form.

Erik Rasmussen

September 08, 2021

More Decks by Erik Rasmussen

Other Decks in Technology


  1. A Wizard Form is a form that is broken into

    several steps. Erik Rasmussen – @erikras
  2. Wizard Form Implementation •Array of "pages" •next = () =>

    index += 1 •previous = () => index -= 1 •State Machine Erik Rasmussen – @erikras
  3. Potion Ocean - Requirements • Four pages: • Contact Info

    • Ingredients • Delivery Preference • Delivery Address • Validation on "Next" • ..but not on "Previous"! • Don't ask for Delivery Address if user chooses "Pick Up" Erik Rasmussen – @erikras
  4. Form Library Handles •Accumulating our form values •Field-level validation •Block

    submit when there are invalid fi elds •Marking fi elds as "touched" when submit is blocked Erik Rasmussen – @erikras
  5. Spells Cast •Split a long form into many smaller ones

    •Eased user cognitive load •Changed fl ow based on answers given •Flexible, robust logic •Easy to show to non-technical team members Erik Rasmussen – @erikras Flow