Multi-step form

[lyjeileen]

Hello,

I’m currently working on building a form with multiple steps, where only one step is visible at a time—similar to the "shipping info" forms often seen in e-commerce checkouts. The form I’m creating has steps like:

Step 1: Personal Information Step 2: Shipping Address Step 3: Payment Details

I’d like to know if it’s possible to implement this type of multi-step form functionality using Uniforms. I'm using uniforms-mui.

Specifically, I’m looking for:

• Any examples or resources that demonstrate how to create multi-step forms using Uniforms.
• Recommendations on managing form state across multiple steps (e.g., using AutoForm for each step and combining them at the end).
• Guidance on handling validation for each step independently, ensuring the user can only proceed to the next step if the current step is valid.

Any suggestions, best practices, or resources would be greatly appreciated!

Thank you for your assistance!

[Monteth]

Hello @lyjeileen, thanks for reaching us!

There is a thread describing this topic in depth - you can look here: https://github.com/vazco/uniforms/issues/730 (thank you, @kestarumper, for finding it!).

To put it short, we recommend dividing a multi-step form into multiple independent forms, creating small and straightforward schemas for each of them. It has many advantages, such as easy configuration, validation on every step, and the possibility of changing the step content based on the previous steps (imagine that the payment options vary depending on the customer's address).

Once you have multiple schemas, you can render them using AutoForm in each step and combine outputs in your favorite state manager to have a united data set, just like you'd expect from a single multi-step form.

I hope it helps you, and if you have any more questions, I'm happy to help!