Skip to main content

Multi-Step Forms

Multiple Form Contexts#

Advantages#

  • Using onSubmit to transition between steps makes validating each step simple.
  • Takes advantage of the decoupling between fields and value state that is core to the design of this library.

Disadvantages#

  • Requires external state to keep track of the field values across steps.
Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Single Form Context#

Advantages#

  • Easier to share visual elements across form steps without creating shared components.

Disadvantages#

  • More complicated validation definition that depends on the current step.
  • Requires a ref and imperative calls to FormState.hasErrors to enforce per-step validation.
Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.