Building a form with multiple steps in Aura Components

It's a usual practice to have more than 40-50 fields on an object when you work on a project.

However, it's not a good user experience practice to show all the 40-50 fields at once. Suggested approach is going to be breaking down the form into multiple small sections with 5-10 fields per section.

It becomes lot more easy to build a component like this considering the fact that we will be using <lightning:recordEditForm />.

We will not be using <lightning:recordForm /> for this since with recordForm we will not be having any control over the fields. We just need to mention the respective values for layoutType and it renders all the fields.

Here is the implementation that I have come up with.

Here is the controller.js file which takes care of showing and hiding different sections of the wizard.

This is the respective helper.js files that has repetitive and utility code.

Liked the post? Let me know what you think of it.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).