← All Examples

Multi-Step Form

Radio inputs control which step panel is visible — no JavaScript, no page reload.

Published May 22, 2026

Demo

1. Your Info 2. Details 3. Done

Your Info

Details

All done!

✓ Form submitted — zero JavaScript used!

HTML

<input type="radio" name="step" id="step1" checked>
<input type="radio" name="step" id="step2">
<input type="radio" name="step" id="step3">

<div class="msf-wrap">
  <div class="msf-panel msf-panel-1">
    <!-- Step 1 content -->
    <label for="step2">Next →</label>
  </div>
  <div class="msf-panel msf-panel-2">
    <!-- Step 2 content -->
    <label for="step1">← Back</label>
    <label for="step3">Next →</label>
  </div>
  <div class="msf-panel msf-panel-3">
    <!-- Step 3 content -->
  </div>
</div>

CSS

.msf-panel { display: none; }

#step1:checked ~ .msf-wrap .msf-panel-1 { display: flex; }
#step2:checked ~ .msf-wrap .msf-panel-2 { display: flex; }
#step3:checked ~ .msf-wrap .msf-panel-3 { display: flex; }

How it works

Hidden radio inputs act as state holders. Each radio's id corresponds to a step. CSS uses the :checked pseudo-class combined with the general sibling combinator ~ to show only the matching .msf-panel. Navigation buttons are <label> elements pointing to the next step's radio input — clicking them changes the checked state and CSS handles the rest.