Multi-Step Form

Fetch pattern JSON: curl https://webspire.de/patterns/forms/multi-step.json

multi-step.html

<section class="ws-forms bg-[var(--ws-forms-bg)] py-20">
  <div class="mx-auto max-w-2xl px-6">
    <h2 class="text-2xl font-bold text-[var(--ws-forms-text)]">Create Account</h2>
    <p class="mt-2 text-[var(--ws-forms-label)]">Complete the steps below to set up your account.</p>

    <!-- Step Indicator -->
    <nav aria-label="Progress" class="mt-10">
      <ol class="flex items-center">
        <!-- Step 1: Completed -->
        <li class="relative flex flex-1 items-center">
          <div class="flex items-center">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--ws-forms-action-bg)] text-[var(--ws-forms-action-text)]">
              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
              </svg>
            </span>
            <span class="ml-3 text-sm font-medium text-[var(--ws-forms-input-focus)]">Personal Info</span>
          </div>
          <div class="absolute left-0 top-5 -z-10 h-0.5 w-full bg-[var(--ws-forms-action-bg)]" aria-hidden="true"></div>
        </li>

        <!-- Step 2: Current -->
        <li class="relative flex flex-1 items-center">
          <div class="flex items-center">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-[var(--ws-forms-input-focus)] bg-[var(--ws-forms-bg)] text-sm font-semibold text-[var(--ws-forms-input-focus)]">
              2
            </span>
            <span class="ml-3 text-sm font-medium text-[var(--ws-forms-text)]">Preferences</span>
          </div>
          <div class="absolute left-0 top-5 -z-10 h-0.5 w-full bg-[var(--ws-forms-input-border)]" aria-hidden="true"></div>
        </li>

        <!-- Step 3: Upcoming -->
        <li class="relative flex items-center">
          <div class="flex items-center">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] text-sm font-semibold text-[var(--ws-forms-label)]">
              3
            </span>
            <span class="ml-3 text-sm font-medium text-[var(--ws-forms-label)]">Confirmation</span>
          </div>
        </li>
      </ol>
    </nav>

    <!-- Progress Bar -->
    <div class="mt-6">
      <div class="h-1.5 w-full rounded-full bg-[var(--ws-forms-input-border)]">
        <div class="h-1.5 rounded-full bg-[var(--ws-forms-action-bg)] transition-all" style="width: 50%"></div>
      </div>
    </div>

    <!-- Step Content: Step 2 (active) -->
    <form class="mt-10">
      <fieldset>
        <legend class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-forms-label)]">Preferences</legend>
        <div class="mt-4 space-y-5">
          <div>
            <label for="ms-role" class="block text-sm font-medium text-[var(--ws-forms-label)]">Role</label>
            <div class="relative">
              <select id="ms-role" name="role"
                class="mt-1.5 block w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
                <option>Developer</option>
                <option>Designer</option>
                <option>Product Manager</option>
                <option>Other</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
              </div>
            </div>
          </div>
          <div>
            <label for="ms-company" class="block text-sm font-medium text-[var(--ws-forms-label)]">Company</label>
            <input type="text" id="ms-company" name="company" autocomplete="organization"
              class="mt-1.5 block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
              placeholder="Acme Inc.">
          </div>
          <div>
            <label for="ms-team-size" class="block text-sm font-medium text-[var(--ws-forms-label)]">Team size</label>
            <div class="relative">
              <select id="ms-team-size" name="team_size"
                class="mt-1.5 block w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-4 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
                <option>Just me</option>
                <option>2–10</option>
                <option>11–50</option>
                <option>51–200</option>
                <option>200+</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
              </div>
            </div>
          </div>
        </div>
      </fieldset>

      <!-- Navigation -->
      <div class="mt-10 flex items-center justify-between border-t border-[var(--ws-forms-input-border)] pt-6">
        <button type="button"
          class="inline-flex items-center gap-2 rounded-xl border border-[var(--ws-forms-input-border)] px-5 py-2.5 text-sm font-medium text-[var(--ws-forms-label)] transition hover:bg-white/5">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
          </svg>
          Previous
        </button>
        <span class="text-sm text-[var(--ws-forms-label)]">Step 2 of 3</span>
        <button type="button"
          class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-forms-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)] transition hover:brightness-110">
          Next
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
        </button>
      </div>
    </form>
  </div>
</section>

Details

Family

forms

Tier

enhanced

Kind

section

Extends

forms/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

formwizardmulti-stepstepperprogress

Slots

Name	Required	Description
stepIndicator	Yes	Step indicator bar with numbered circles and connecting lines.
stepContent	Yes	Form fields area for the current step.
navigation	Yes	Previous/Next buttons and progress text.

Wizard-style multi-step form with three steps. Top section shows a step indicator with numbered circles connected by lines — completed steps display a checkmark, the current step is highlighted with an accent ring, and upcoming steps are muted. Below is the form content area for the active step. Bottom navigation has Previous/Next buttons with a centered step counter. Fully responsive and dark-mode ready.