← All elements
<div class="ms"><input type="radio" name="s" id="s1" checked><input type="radio" name="s" id="s2"><input type="radio" name="s" id="s3"><div class="dots"><i></i><i></i><i></i></div><div class="st a">Choose a plan<label for="s2">Next →</label></div><div class="st b">Add details<label for="s3">Next →</label></div><div class="st c">All done!<label for="s1">↺ Restart</label></div></div>About this layout
A three-step flow where radio inputs decide which panel shows, with a step indicator that fills as you progress.
How it works
Three hidden radios store the current step. Sibling selectors show only the panel for the checked step, and fill the progress bars up to that step. Each Next button is a label for the next radio, so clicking it moves forward, and the last button points back to the first.
Ways to customise it
- Change the panel titles and button texts.
- Add a fourth radio, panel and progress bar.
- Edit the purple accent colour.
Good to know
This shows navigation only. Real forms need inputs, validation and submission with script or a server. The radios also let keyboard users move between steps.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.