form wizard multi-step stepper progress form wizard stepper multi-step progress steps onboarding registration multi-step form wizard form with step indicator
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
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.