You're a Wizard Form, Harry
summary
A five‑step wizard form is implemented with XState driving explicit states (contact, ingredients, delivery, delivery address, order completed) and a form library holding values via React Final Form. Next triggers form validation and sends a typed event carrying submitted values; previous does not validate. A guard (isDelivery) conditionally skips the delivery address step when delivery is not chosen. The machine visualizes in stately.ai, code is on GitHub, and the demo works end to end.
AI-written summary · about
chapters (16)
- 0:00Introduction to wizard forms
- 0:34What is a wizard form
- 1:14Why use a wizard form
- 2:35Implementing wizard forms
- 3:52Project overview
- 4:48State machine design
- 6:58Scaffolding the application
- 8:35Defining machine logic
- 10:17Implementing transitions
- 13:07Connecting React to XState
- 15:03Handling form events
- 17:12Refining form navigation
- 20:04Adding conditional logic
- 22:23Testing the conditional flow
- 25:30Visualizing the state machine
- 27:12Conclusion and productivity
related talks
32mFormal Forms with State Machines
12mJSONize your forms: The Abstraction Dilemma
40mVisualize your State Management with XState
30mA UI in All Its States with XState
31mFable.Form: Unlock your Forms Super Powers
40mCoding Complex App Logic, Visually
44mScaling State in Vue: Why XState Matters
11mForms Don't Need to Suck