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.

7e86f7e41168df55b65e30cdda423e10?s=128

Erik Rasmussen

September 08, 2021
Tweet

Transcript

  1. Infobip Shift 2021 鈥 Zadar, Croatia You're a Wizard Form,

    Harry. Erik Rasmussen 鈥 @erikras
  2. Forms?

  3. None
  4. None
  5. A Wizard Form is a form that is broken into

    several steps. Erik Rasmussen 鈥 @erikras
  6. When to use a Wizard Form? 鈥eally long forms 鈥ynamic

    forms Erik Rasmussen 鈥 @erikras
  7. Wizard Form Implementation 鈥rray of "pages" 鈥ext = () =>

    index += 1 鈥revious = () => index -= 1 鈥tate Machine Erik Rasmussen 鈥 @erikras
  8. None
  9. 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
  10. Erik Rasmussen 鈥 @erikras

  11. Wizard Form State Machine Erik Rasmussen 鈥 @erikras

  12. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  13. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  14. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  15. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  16. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  17. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  18. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  19. Erik Rasmussen 鈥 @erikras Wizard Form State Machine

  20. Erik Rasmussen 鈥 @erikras https://react- fi nal-form.org REACT FINAL FORM

  21. Form Library Handles 鈥ccumulating our form values 鈥ield-level validation 鈥lock

    submit when there are invalid fi elds 鈥arking fi elds as "touched" when submit is blocked Erik Rasmussen 鈥 @erikras
  22. Erik Rasmussen 鈥 @erikras Let's Code!

  23. http://github.com/erikras/potionocean Erik Rasmussen 鈥 @erikras

  24. Spells Cast 鈥plit a long form into many smaller ones

    鈥ased user cognitive load 鈥hanged fl ow based on answers given 鈥lexible, robust logic 鈥asy to show to non-technical team members Erik Rasmussen 鈥 @erikras Flow
  25. Erik Rasmussen 鈥 @erikras Centered centered.app

  26. Erik Rasmussen 鈥 @erikras One month free 鈥 Premium Service

    centered.app Discount Code: SHIFT