Vertical Stepper — Free HTML CSS JS Form Snippet

The vertical stepper is the onboarding pattern of choice when steps have real content — unlike a horizontal stepper, each step's form expands inline beneath its own title, so the user always sees where they are, what is done, and what is next in one column. This component implements the full Material-style pattern in HTML, CSS, and vanilla JavaScript: numbered dots that morph into green checkmarks, connector lines that fill as you advance, smoothly animating collapsible panels, back navigation, jump-back editing of completed steps, and a completion banner.

Animating height with the 0fr grid trick

Collapsible content whose height is unknown is the classic CSS problem: height: auto cannot be transitioned. This stepper uses the modern solution — each panel is a one-cell grid transitioning grid-template-rows between 0fr and 1fr, with the inner element set to overflow: hidden. The browser interpolates the fractional row from zero to content height, so panels expand and collapse smoothly with zero JavaScript measurement — no scrollHeight reads, no hard-coded max-heights that break when content changes. It is the cleanest height animation technique shipping in all modern browsers.

The rail: dots, checks, and filling connectors

Each step's left rail holds a 30px dot and a 2px connector line. The dot renders both the step number and a checkmark SVG stacked on top of each other; the done state fades the number out and scales the check in, while the dot's background transitions from grey to green — one CSS state change, two cross-fading layers. The connector line contains an inner <i> filled with the accent colour and scaled with transform: scaleY(0→1) from the top, so completing a step visibly "pours" progress down toward the next one. Scaling a transform instead of animating height keeps the fill on the compositor.

State: one index, three classes

The JavaScript tracks two numbers: current (the open step) and maxReached (the furthest completed step). update() derives every visual from them — active for the open step, done for completed steps behind the cursor — so the DOM is a pure function of two integers. Continue advances both; Back moves current down without losing maxReached, which is what enables jump-back editing: clicking the title of any previously completed step re-opens it, and because maxReached is preserved, its checkmark returns the moment you navigate away again.

Event delegation for all controls

A single click listener on the root handles Continue, Back, and title clicks via closest() checks, rather than binding listeners per button. This keeps the wiring at three branches regardless of step count — add a fourth step to the markup and no JavaScript changes are needed beyond it simply working.

Completion state

When current walks past the last step, every step shows as done and a green completion banner fades in with a small rise animation. In a real signup flow this is where you would submit the accumulated form data — the demo keeps inputs uncontrolled so you can read them all at the end with a FormData pass or per-input queries.

Customisation

Add steps by copying a .vst-step block (the last step omits the connector line); the delegation and state logic adapt automatically. Add per-step validation by gating the Continue branch — check the step's inputs and refuse to advance with an error style, similar to the inline validation form. Swap the indigo accent and green done-colour tokens to match your brand.