While I was working on a e-commerce site for a client, there was a part that I had to work on a Wizard / Stepper form for the checkout page. At first I was thinking maybe I could just use a plugin for this? so I searched around the internet but didn’t find anything that meets my requirements, so.. I ended up making my own.
The idea is actually very simple, using state management you can manipulate how the buttons and bullets should be displayed. And with a little bit of styling, you can emphasize how the bullets work: Green bullet with a check mark indicates that the page is complete, the shaded orange bullet indicates the page currently displayed, and the outlined bullets indicate the pages that are not yet complete.
Bellow is the demo + code:
