Home
JUGENDRA GANGWAR
Responsive Multi-Step Registration Form with Progress Stepper

Responsive Multi-Step Registration Form with Progress Stepper

This tailwind example is contributed by JUGENDRA GANGWAR, on 20-Aug-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Form Steps Other

Author JUGENDRA GANGWAR

Fork Fullscreen

<body class="min-h-screen bg-canvas text-ink">
  <main class="min-h-screen flex items-center justify-center px-4 py-8 sm:px-6 lg:px-8">
    <section class="w-full max-w-6xl overflow-hidden rounded-[28px] border border-line bg-surface shadow-soft">
      <div class="grid min-h-[720px] lg:grid-cols-[340px_1fr]">
        <aside class="hidden lg:flex flex-col bg-ink px-8 py-10 text-white">
          <div>
            <span class="inline-flex items-center rounded-full border border-white/15 px-3 py-1 text-xs font-medium tracking-wide text-white/70">
              ACCOUNT SETUP
            </span>
            <h1 class="mt-6 text-3xl font-semibold leading-tight">
              Create your workspace
            </h1>
            <p class="mt-3 text-sm leading-6 text-white/55">
              Complete a few quick steps to personalize your account and get started.
            </p>
          </div>
          <div class="mt-12 space-y-2">
            <button
              type="button"
              data-sidebar-step="0"
              class="sidebar-step group flex w-full items-start gap-4 rounded-2xl bg-white/10 p-4 text-left transition"
            >
              <span class="step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-sm font-semibold text-ink">
                1
              </span>
              <span>
                <span class="block text-sm font-semibold">
                  Personal details
                </span>
                <span class="mt-1 block text-xs leading-5 text-white/50">
                  Basic contact information
                </span>
              </span>
            </button>
            <button
              type="button"
              data-sidebar-step="1"
              class="sidebar-step group flex w-full items-start gap-4 rounded-2xl p-4 text-left transition"
            >
              <span class="step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/20 text-sm font-semibold text-white/60">
                2
              </span>
              <span>
                <span class="block text-sm font-semibold text-white/65">
                  Company
                </span>
                <span class="mt-1 block text-xs leading-5 text-white/40">
                  Tell us about your role
                </span>
              </span>
            </button>
            <button
              type="button"
              data-sidebar-step="2"
              class="sidebar-step group flex w-full items-start gap-4 rounded-2xl p-4 text-left transition"
            >
              <span class="step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/20 text-sm font-semibold text-white/60">
                3
              </span>
              <span>
                <span class="block text-sm font-semibold text-white/65">
                  Preferences
                </span>
                <span class="mt-1 block text-xs leading-5 text-white/40">
                  Customize your setup
                </span>
              </span>
            </button>
            <button
              type="button"
              data-sidebar-step="3"
              class="sidebar-step group flex w-full items-start gap-4 rounded-2xl p-4 text-left transition"
            >
              <span class="step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/20 text-sm font-semibold text-white/60">
                4
              </span>
              <span>
                <span class="block text-sm font-semibold text-white/65">
                  Review
                </span>
                <span class="mt-1 block text-xs leading-5 text-white/40">
                  Confirm your information
                </span>
              </span>
            </button>
          </div>
          <div class="mt-auto rounded-2xl border border-white/10 bg-white/5 p-4">
            <div class="flex items-start gap-3">
              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/10">
                <svg class="h-4 w-4 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                    d="M12 6v6l4 2m5-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div>
                <p class="text-sm font-medium">Takes about 2 minutes</p>
                <p class="mt-1 text-xs leading-5 text-white/45">
                  Your progress is saved while you complete the form.
                </p>
              </div>
            </div>
          </div>
        </aside>
        <div class="flex flex-col">
          <div class="border-b border-line px-5 py-5 lg:hidden">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-forest">
                  Account setup
                </p>
                <p class="mt-1 text-lg font-semibold">
                  Create your workspace
                </p>
              </div>
              <span id="mobileStepCount" class="text-sm font-medium text-muted">
                1 / 4
              </span>
            </div>
            <div class="mt-5 grid grid-cols-4 gap-2">
              <div class="mobile-progress h-1.5 rounded-full bg-forest"></div>
              <div class="mobile-progress h-1.5 rounded-full bg-line"></div>
              <div class="mobile-progress h-1.5 rounded-full bg-line"></div>
              <div class="mobile-progress h-1.5 rounded-full bg-line"></div>
            </div>
          </div>
          <form id="registrationForm" class="flex flex-1 flex-col" novalidate>
            <div class="flex-1 px-5 py-8 sm:px-10 sm:py-10 lg:px-14 lg:py-12">
              <div class="form-step" data-step="0">
                <div class="max-w-2xl">
                  <p class="text-sm font-semibold text-forest">
                    Step 1 of 4
                  </p>
                  <h2 class="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">
                    Tell us about yourself
                  </h2>
                  <p class="mt-3 max-w-xl text-sm leading-6 text-muted">
                    We’ll use these details to personalize your account and keep your profile up to date.
                  </p>
                </div>
                <div class="mt-9 grid gap-6 sm:grid-cols-2">
                  <div>
                    <label for="firstName" class="mb-2 block text-sm font-medium">
                      First name
                    </label>
                    <input
                      id="firstName"
                      name="firstName"
                      type="text"
                      required
                      autocomplete="given-name"
                      placeholder="Alex"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please enter your first name.
                    </p>
                  </div>
                  <div>
                    <label for="lastName" class="mb-2 block text-sm font-medium">
                      Last name
                    </label>
                    <input
                      id="lastName"
                      name="lastName"
                      type="text"
                      required
                      autocomplete="family-name"
                      placeholder="Morgan"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please enter your last name.
                    </p>
                  </div>
                  <div>
                    <label for="email" class="mb-2 block text-sm font-medium">
                      Email address
                    </label>
                    <input
                      id="email"
                      name="email"
                      type="email"
                      required
                      autocomplete="email"
                      placeholder="alex@company.com"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Enter a valid email address.
                    </p>
                  </div>
                  <div>
                    <label for="phone" class="mb-2 block text-sm font-medium">
                      Phone number
                    </label>
                    <input
                      id="phone"
                      name="phone"
                      type="tel"
                      required
                      autocomplete="tel"
                      placeholder="+1 555 012 3456"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please enter your phone number.
                    </p>
                  </div>
                </div>
              </div>
              <div class="form-step hidden" data-step="1">
                <div class="max-w-2xl">
                  <p class="text-sm font-semibold text-forest">
                    Step 2 of 4
                  </p>
                  <h2 class="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">
                    Your company
                  </h2>
                  <p class="mt-3 max-w-xl text-sm leading-6 text-muted">
                    These details help us tailor your workspace to your team and role.
                  </p>
                </div>
                <div class="mt-9 grid gap-6 sm:grid-cols-2">
                  <div class="sm:col-span-2">
                    <label for="company" class="mb-2 block text-sm font-medium">
                      Company name
                    </label>
                    <input
                      id="company"
                      name="company"
                      type="text"
                      required
                      autocomplete="organization"
                      placeholder="Northstar Studio"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please enter your company name.
                    </p>
                  </div>
                  <div>
                    <label for="role" class="mb-2 block text-sm font-medium">
                      Your role
                    </label>
                    <select
                      id="role"
                      name="role"
                      required
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    >
                      <option value="">Select role</option>
                      <option>Founder / Owner</option>
                      <option>Product Manager</option>
                      <option>Designer</option>
                      <option>Developer</option>
                      <option>Marketing</option>
                      <option>Operations</option>
                      <option>Other</option>
                    </select>
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please select your role.
                    </p>
                  </div>
                  <div>
                    <label for="teamSize" class="mb-2 block text-sm font-medium">
                      Team size
                    </label>
                    <select
                      id="teamSize"
                      name="teamSize"
                      required
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    >
                      <option value="">Select team size</option>
                      <option>Just me</option>
                      <option>2–10 people</option>
                      <option>11–50 people</option>
                      <option>51–200 people</option>
                      <option>201–500 people</option>
                      <option>500+ people</option>
                    </select>
                    <p class="error-message mt-1.5 hidden text-xs text-red-600">
                      Please select your team size.
                    </p>
                  </div>
                  <div class="sm:col-span-2">
                    <label for="website" class="mb-2 block text-sm font-medium">
                      Company website
                      <span class="font-normal text-muted">(optional)</span>
                    </label>
                    <input
                      id="website"
                      name="website"
                      type="url"
                      placeholder="https://example.com"
                      class="form-input w-full rounded-xl border border-line bg-white px-4 py-3.5 text-sm outline-none transition placeholder:text-slate-400 focus:border-forest focus:ring-4 focus:ring-forestSoft"
                    />
                  </div>
                </div>
              </div>
              <div class="form-step hidden" data-step="2">
                <div class="max-w-2xl">
                  <p class="text-sm font-semibold text-forest">
                    Step 3 of 4
                  </p>
                  <h2 class="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">
                    Set your preferences
                  </h2>
                  <p class="mt-3 max-w-xl text-sm leading-6 text-muted">
                    Choose what best matches how you plan to use the platform.
                  </p>
                </div>
                <div class="mt-9">
                  <fieldset>
                    <legend class="text-sm font-medium">
                      Primary goal
                    </legend>
                    <div class="mt-3 grid gap-3 sm:grid-cols-2">
                      <label class="goal-option flex cursor-pointer gap-3 rounded-2xl border border-line p-4 transition hover:border-forest/40">
                        <input
                          type="radio"
                          name="goal"
                          value="Manage projects"
                          required
                          class="mt-1 h-4 w-4 accent-forest"
                        />
                        <span>
                          <span class="block text-sm font-semibold">
                            Manage projects
                          </span>
                          <span class="mt-1 block text-xs leading-5 text-muted">
                            Organize tasks, workflows and team progress.
                          </span>
                        </span>
                      </label>
                      <label class="goal-option flex cursor-pointer gap-3 rounded-2xl border border-line p-4 transition hover:border-forest/40">
                        <input
                          type="radio"
                          name="goal"
                          value="Collaborate with team"
                          required
                          class="mt-1 h-4 w-4 accent-forest"
                        />
                        <span>
                          <span class="block text-sm font-semibold">
                            Collaborate with team
                          </span>
                          <span class="mt-1 block text-xs leading-5 text-muted">
                            Keep communication and work in one place.
                          </span>
                        </span>
                      </label>
                      <label class="goal-option flex cursor-pointer gap-3 rounded-2xl border border-line p-4 transition hover:border-forest/40">
                        <input
                          type="radio"
                          name="goal"
                          value="Track performance"
                          required
                          class="mt-1 h-4 w-4 accent-forest"
                        />
                        <span>
                          <span class="block text-sm font-semibold">
                            Track performance
                          </span>
                          <span class="mt-1 block text-xs leading-5 text-muted">
                            Monitor progress, reports and key metrics.
                          </span>
                        </span>
                      </label>
                      <label class="goal-option flex cursor-pointer gap-3 rounded-2xl border border-line p-4 transition hover:border-forest/40">
                        <input
                          type="radio"
                          name="goal"
                          value="Client work"
                          required
                          class="mt-1 h-4 w-4 accent-forest"
                        />
                        <span>
                          <span class="block text-sm font-semibold">
                            Client work
                          </span>
                          <span class="mt-1 block text-xs leading-5 text-muted">
                            Manage deliverables and external projects.
                          </span>
                        </span>
                      </label>
                    </div>
                    <p id="goalError" class="mt-2 hidden text-xs text-red-600">
                      Please choose a primary goal.
                    </p>
                  </fieldset>
                  <div class="mt-7">
                    <label for="updates" class="flex cursor-pointer items-start gap-3 rounded-2xl bg-sand p-4">
                      <input
                        id="updates"
                        name="updates"
                        type="checkbox"
                        class="mt-1 h-4 w-4 rounded accent-forest"
                      />

<span>
                        <span class="block text-sm font-medium">
                          Product tips and updates
                        </span>
                        <span class="mt-1 block text-xs leading-5 text-muted">
                          Receive occasional emails about useful features and product improvements.
                        </span>
                      </span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-step hidden" data-step="3">
                <div class="max-w-2xl">
                  <p class="text-sm font-semibold text-forest">
                    Step 4 of 4
                  </p>
                  <h2 class="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">
                    Review your details
                  </h2>
                  <p class="mt-3 max-w-xl text-sm leading-6 text-muted">
                    Make sure everything looks right before creating your account.
                  </p>
                </div>
                <div class="mt-9 space-y-4">
                  <div class="rounded-2xl border border-line">
                    <div class="flex items-center justify-between border-b border-line px-5 py-4">
                      <div>
                        <p class="text-sm font-semibold">
                          Personal details
                        </p>
                        <p class="mt-0.5 text-xs text-muted">
                          Your contact information
                        </p>
                      </div>
                      <button
                        type="button"
                        data-edit-step="0"
                        class="text-sm font-semibold text-forest hover:text-forestDark"
                      >
                        Edit
                      </button>
                    </div>
                    <div class="grid gap-5 px-5 py-5 sm:grid-cols-2">
                      <div>
                        <p class="text-xs text-muted">Full name</p>
                        <p id="reviewName" class="mt-1 text-sm font-medium">—</p>
                      </div>

<div>
                        <p class="text-xs text-muted">Email</p>
                        <p id="reviewEmail" class="mt-1 text-sm font-medium">—</p>
                      </div>
                      <div>
                        <p class="text-xs text-muted">Phone</p>
                        <p id="reviewPhone" class="mt-1 text-sm font-medium">—</p>
                      </div>
                    </div>
                  </div>
                  <div class="rounded-2xl border border-line">
                    <div class="flex items-center justify-between border-b border-line px-5 py-4">
                      <div>
                        <p class="text-sm font-semibold">
                          Company
                        </p>
                        <p class="mt-0.5 text-xs text-muted">
                          Workspace details
                        </p>
                      </div>
                      <button
                        type="button"
                        data-edit-step="1"
                        class="text-sm font-semibold text-forest hover:text-forestDark"
                      >
                        Edit
                      </button>
                    </div>
                    <div class="grid gap-5 px-5 py-5 sm:grid-cols-2">
                      <div>
                        <p class="text-xs text-muted">Company</p>
                        <p id="reviewCompany" class="mt-1 text-sm font-medium">—</p>
                      </div>
                      <div>
                        <p class="text-xs text-muted">Role</p>
                        <p id="reviewRole" class="mt-1 text-sm font-medium">—</p>
                      </div>
                      <div>
                        <p class="text-xs text-muted">Team size</p>
                        <p id="reviewTeam" class="mt-1 text-sm font-medium">—</p>
                      </div>
                      <div>
                        <p class="text-xs text-muted">Website</p>
                        <p id="reviewWebsite" class="mt-1 break-all text-sm font-medium">—</p>
                      </div>
                    </div>
                  </div>
                  <div class="rounded-2xl border border-line">
                    <div class="flex items-center justify-between border-b border-line px-5 py-4">
                      <div>
                        <p class="text-sm font-semibold">
                          Preferences
                        </p>
                        <p class="mt-0.5 text-xs text-muted">
                          Your selected setup
                        </p>
                      </div>
                      <button
                        type="button"
                        data-edit-step="2"
                        class="text-sm font-semibold text-forest hover:text-forestDark"
                      >
                        Edit
                      </button>
                    </div>
                    <div class="px-5 py-5">
                      <p class="text-xs text-muted">Primary goal</p>
                      <p id="reviewGoal" class="mt-1 text-sm font-medium">—</p>
                    </div>
                  </div>
                </div>
              </div>
              <div id="successState" class="hidden h-full">
                <div class="flex min-h-[430px] items-center justify-center">
                  <div class="max-w-lg text-center">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-forestSoft text-forest">
                      <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    </div>
                    <h2 class="mt-6 text-3xl font-semibold tracking-tight">
                      You’re all set
                    </h2>
                    <p class="mt-3 text-sm leading-6 text-muted">
                      Your workspace has been created successfully. You can now continue to your dashboard.
                    </p>
                    <button
                      type="button"
                      class="mt-7 inline-flex items-center justify-center rounded-xl bg-forest px-6 py-3 text-sm font-semibold text-white transition hover:bg-forestDark"
                    >
                      Go to dashboard
                      <svg
                        class="ml-2 h-4 w-4"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.8"
                          d="M9 5l7 7-7 7"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div id="formFooter" class="border-t border-line bg-sand px-5 py-5 sm:px-10 lg:px-14">
              <div class="flex items-center justify-between gap-4">
                <button
                  id="prevBtn"
                  type="button"
                  class="invisible inline-flex items-center justify-center rounded-xl border border-line bg-white px-5 py-3 text-sm font-semibold transition hover:border-slate-300 hover:bg-slate-50"
                >
                  <svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.8"
                      d="M15 19l-7-7 7-7"
                    />
                  </svg>
                  Back
                </button>
                <div class="hidden items-center gap-2 text-xs text-muted sm:flex">
                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.7"
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4"
                    />
                  </svg>
                  Secure form
                </div>
                <button
                  id="nextBtn"
                  type="button"
                  class="inline-flex items-center justify-center rounded-xl bg-forest px-6 py-3 text-sm font-semibold text-white transition hover:bg-forestDark focus:outline-none focus:ring-4 focus:ring-forestSoft"
                >
                  Continue

const previousButton = document.getElementById("prevBtn");
    const nextButton = document.getElementById("nextBtn");

const mobileStepCount = document.getElementById("mobileStepCount");
    const formFooter = document.getElementById("formFooter");
    const successState = document.getElementById("successState");

let currentStep = 0;

function showStep(stepIndex) {
      currentStep = stepIndex;

steps.forEach((step, index) => {
        step.classList.toggle("hidden", index !== currentStep);
      });

updateNavigation();
      updateSidebar();
      updateMobileProgress();

if (currentStep === 3) {
        populateReview();
      }

window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }

function updateNavigation() {
      previousButton.classList.toggle("invisible", currentStep === 0);

if (currentStep === steps.length - 1) {
        nextButton.innerHTML = `
          Create account
          <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.8"
              d="M5 13l4 4L19 7"
            />
          </svg>
        `;
      } else {
        nextButton.innerHTML = `
          Continue
          <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.8"
              d="M9 5l7 7-7 7"
            />
          </svg>
        `;
      }
    }

function updateSidebar() {
      sidebarSteps.forEach((item, index) => {
        const circle = item.querySelector(".step-circle");
        const title = item.querySelector("span span:first-child");

item.classList.remove("bg-white/10");

circle.className =
          "step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold transition";

if (index < currentStep) {
          circle.classList.add("bg-forest", "text-white");
          circle.innerHTML = `
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
          `;

title.classList.remove("text-white/65");
          title.classList.add("text-white");

} else if (index === currentStep) {
          item.classList.add("bg-white/10");

circle.classList.add("bg-white", "text-ink");
          circle.textContent = index + 1;

title.classList.remove("text-white/65");
          title.classList.add("text-white");

} else {
          circle.classList.add(
            "border",
            "border-white/20",
            "text-white/60"
          );

circle.textContent = index + 1;

title.classList.add("text-white/65");
        }
      });
    }

function updateMobileProgress() {
      mobileStepCount.textContent = `${currentStep + 1} / ${steps.length}`;

mobileProgress.forEach((bar, index) => {
        bar.classList.toggle("bg-forest", index <= currentStep);
        bar.classList.toggle("bg-line", index > currentStep);
      });
    }

function validateCurrentStep() {
      const currentStepElement = steps[currentStep];

const requiredFields = [
        ...currentStepElement.querySelectorAll(
          "input[required], select[required], textarea[required]"
        )
      ];

let valid = true;

requiredFields.forEach((field) => {

if (field.type === "radio") return;

const error = field.parentElement.querySelector(".error-message");

if (!field.checkValidity()) {
          valid = false;

field.classList.add(
            "border-red-400",
            "focus:border-red-500",
            "focus:ring-red-100"
          );

if (error) error.classList.remove("hidden");

} else {
          field.classList.remove(
            "border-red-400",
            "focus:border-red-500",
            "focus:ring-red-100"
          );

if (error) error.classList.add("hidden");
        }
      });

if (currentStep === 2) {
        const selectedGoal = form.querySelector('input[name="goal"]:checked');
        const goalError = document.getElementById("goalError");

if (!selectedGoal) {
          valid = false;
          goalError.classList.remove("hidden");
        } else {
          goalError.classList.add("hidden");
        }
      }

return valid;
    }

nextButton.addEventListener("click", () => {

if (!validateCurrentStep()) return;

if (currentStep < steps.length - 1) {
        showStep(currentStep + 1);
      } else {
        completeRegistration();
      }
    });

previousButton.addEventListener("click", () => {
      if (currentStep > 0) {
        showStep(currentStep - 1);
      }
    });

function populateReview() {
      const firstName = form.firstName.value.trim();
      const lastName = form.lastName.value.trim();

document.getElementById("reviewName").textContent =
        `${firstName} ${lastName}`;

document.getElementById("reviewEmail").textContent =
        form.email.value || "—";

document.getElementById("reviewPhone").textContent =
        form.phone.value || "—";

document.getElementById("reviewCompany").textContent =
        form.company.value || "—";

document.getElementById("reviewRole").textContent =
        form.role.value || "—";

document.getElementById("reviewTeam").textContent =
        form.teamSize.value || "—";

document.getElementById("reviewWebsite").textContent =
        form.website.value || "Not provided";

const selectedGoal = form.querySelector('input[name="goal"]:checked');

document.getElementById("reviewGoal").textContent =
        selectedGoal ? selectedGoal.value : "—";
    }

document.querySelectorAll("[data-edit-step]").forEach((button) => {
      button.addEventListener("click", () => {
        showStep(Number(button.dataset.editStep));
      });
    });

form.querySelectorAll("input, select").forEach((field) => {

field.addEventListener("input", () => {
        if (field.checkValidity()) {
          field.classList.remove(
            "border-red-400",
            "focus:border-red-500",
            "focus:ring-red-100"
          );

const error = field.parentElement.querySelector(".error-message");

if (error) error.classList.add("hidden");
        }
      });

});

document.querySelectorAll('input[name="goal"]').forEach((radio) => {

radio.addEventListener("change", () => {

document.getElementById("goalError").classList.add("hidden");

document.querySelectorAll(".goal-option").forEach((option) => {
          option.classList.remove(
            "border-forest",
            "bg-forestSoft"
          );
        });

radio.closest(".goal-option").classList.add(
          "border-forest",
          "bg-forestSoft"
        );

});

function completeRegistration() {

steps.forEach((step) => step.classList.add("hidden"));

successState.classList.remove("hidden");
      formFooter.classList.add("hidden");

sidebarSteps.forEach((item) => {

item.classList.remove("bg-white/10");

const circle = item.querySelector(".step-circle");

circle.className =
          "step-circle flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-forest text-white";

circle.innerHTML = `
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 13l4 4L19 7"
            />
          </svg>
        `;

});

}

showStep(0);
  </script>

Related Examples

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Achraf Testq

5 months ago

602
Google map iframe with tailwind

Author:
Kofi Osei

3 years ago

22.4k
Sign in form
simple full-height login form

Author:
Lukas Müller

3 years ago

10.5k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

2k
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.5k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

1 year ago

1.5k
carte visa black

Author:
Omer fils ELENGA

3 months ago

268
Forgot password form (fullscreen)

Author:
Prajwal Hallale

3 years ago

12.3k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

1 year ago

2.9k
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
Steps block

Author:
Ron Hicks

3 years ago

13k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

11 months ago

672

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components