"Step based" Layout form

Hi! How would I approach making a form that has “steps” to completing it?
It’s like, you fill a few form fields, then click “Next”, then fill a few more fields, and “Next” and so on, finally clicking “Finish” when all required steps are complete.

I would create a layout for each step and then have a container layout that contains a step and a set of navigation buttons. When the navigation buttons are pressed it replaces the step layout with the next / previous one. And then the logic is fairly straightforward to have the correct navigation buttons show up (set text to finish instead of next on last element and disable back on first element)

Thx!

You can use this add-on for example: VStepper - Vaadin Add-on Directory

It depends a lot of your needs ( if you need to validate each step and globally or save as draft…

Oh wow! This one is great! Thank you!

ill implement it right now!