---
title: "Multi Step Form"
url: "https://sanyam.sh/lab/multi-step-form"
date: "2025-12-27"
---

# Multi Step Form

a sequential multi-step form with a smooth height transition between steps (no layout jump).

key insight: observe the active step content with `ResizeObserver`, store its `offsetHeight`, and animate a wrapper `motion.div` height with a spring. `AnimatePresence` (mode="wait") keeps enter/exit clean while the height animates to the next step.

- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/multi-step-form/index.tsx