"use client"; import { useState, type FormEvent } from "react"; import { Check, ChevronLeft } from "lucide-react"; const steps = ["Account", "Workspace", "Plan"]; const field = "mt-1.5 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30"; export default function FormMultiStep() { const [step, setStep] = useState(0); const [plan, setPlan] = useState("team"); const [done, setDone] = useState(false); function next(e: FormEvent) { e.preventDefault(); if (step < steps.length - 1) setStep(step + 1); else setDone(true); } return (

{i < step || done ? : i + 1} {s} {i < steps.length - 1 && }

{done ? (

Workspace created

We’ve emailed your invite link to the team.

) : (

Step {step + 1}: {["Create your account", "Name your workspace", "Choose a plan"][step]}

{step === 0 && ( <>

Full name

)} {step === 1 && ( <>

Workspace name

Workspace URL

app.io/

)} {step === 2 && (

Plan {[["starter", "Starter", "Free for up to 3 people"], ["team", "Team", "$10 per user / month"], ["scale", "Scale", "$24 per user / month"]].map(([v, l, d]) => ( {l}{d} setPlan(v)} className="h-4 w-4 text-indigo-600 focus:ring-indigo-500" /> ))}

)}

); }

Multi-step form

Step 1: Create your account