Multi-step flow on the same page

[dandv]

How should a multi-step flow be designed for a form to appear gradually on the same page (no routing)? The idea is to have a few fields, then two buttons "Submit" and "Fill in more fields". If the user clicks "Fill in more fields", then more fields of the form are revealed. Anything better than a div with a display state of none vs. block?

[bluebill1049]

This is what I do at work.

<Stepper> // this component host all 3 steps form data
   <Step1 /> // each page will have it's own custom hook and update the Stepper form value.
   <Step2 />
   <Step3 />
<Stepper>

not using display none or block at all :)

[frequencydesign]

Would you try this same pattern if you wanted to have forms under 3 different tabs?

[bluebill1049]

it depends, I will only use the above approach if each tab is isolated.