Build a Multi-Step Form in Next.js with React Hook Form & Chakra UI!

Welcome to this step-by-step tutorial on building a multi-step form in Next.js using React Hook Form, Chakra UI, and Zod for validation. By the end of this tutorial, you'll have a fully functional onboarding form that supports browser navigation, and a seamless user experience.

📺 Check out the tutorial on YouTube (https://www.youtube.com/playlist?list=PLx2Y9Sna27XuKM4RDa0kfn5tqDp75zSOI)

📌 What You'll Learn

✅ Setting up Chakra UI v3 in a Next.js project
✅ Creating multi-step forms with Chakra UI's Field & Steps components
✅ Adding form validation using Zod & React Hook Form
✅ Managing form state efficiently across multiple steps
✅ Implementing URL-based navigation (useSearchParams) to persist form steps

📚 Lessons in This Series

1️⃣ Introduction to Multi-Step Forms in Next.js

• Overview of what we’ll build
• Why Next.js, React Hook Form, and Chakra UI?

2️⃣ Installation & Setup of Chakra UI

• Installing Chakra UI v3 in a Next.js (App Router) project
• Setting up the Chakra UI provider

3️⃣ Building the Forms using Chakra UI’s Field Component

• Creating input fields with Chakra UI
• Structuring reusable form components

4️⃣ Adding Validation with Zod & React Hook Form

• Setting up validation schemas with Zod
• Connecting Zod to React Hook Form
• Displaying error messages with Chakra UI

5️⃣ Building the Onboarding Form with Chakra UI's Steps Component

• Implementing the step-by-step form navigation
• Styling and structuring steps dynamically

6️⃣ Managing Previous Navigation

• Using the Steps.PrevTrigger component

7️⃣ Using URL-Based Navigation for a Better UX

• Implementing useSearchParams for step tracking
• Updating the URL dynamically with useRouter().push()
• Making the form refresh-proof & shareable

🎬 Watch the Full Video Series

🚀 Technologies Used

• Next.js 13+ (App Router)
• React Hook Form (Form handling)
• Chakra UI (UI styling & accessibility)
• Zod (Schema validation)
• useSearchParams & useRouter (Next.js navigation)

📂 Project Setup

To follow along, clone this repo and install dependencies:

git clone https://github.com/estheragbaje/Multi-step-Onboarding-Form

cd onboarding-form
npm install

Run the project:

npm run dev

👥 Connect with Me

💡 Follow for more tutorials
📩 Twitter: @_estheradebayo
📺 YouTube: Esther

---

🚀 If you found this tutorial helpful, give it a ⭐ on GitHub and subscribe on YouTube!