onboarding stepper wizard multi-step form onboarding stepper wizard multi-step form progress steps multi-step onboarding wizard step-by-step registration form
Onboarding Base
Fetch pattern JSON:
curl https://webspire.de/patterns/onboarding/base.json base.html
<section aria-label="Onboarding wizard" class="ws-onboarding mx-auto max-w-2xl px-4 py-12">
<nav aria-label="Onboarding steps" class="mb-8">
<ol class="flex items-center justify-between">
<!-- Step 1: Completed -->
<li class="flex flex-1 items-center">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-onboarding-accent)] text-sm font-semibold text-[var(--ws-onboarding-accent-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
<span class="sr-only">Completed:</span>
</span>
<span class="text-sm font-medium text-[var(--ws-onboarding-accent)]">Account</span>
</div>
<div class="mx-3 h-px flex-1 bg-[var(--ws-onboarding-accent)]" aria-hidden="true"></div>
</li>
<!-- Step 2: Active -->
<li class="flex flex-1 items-center" aria-current="step">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-accent)] bg-[var(--ws-onboarding-bg)] text-sm font-semibold text-[var(--ws-onboarding-accent)]">2</span>
<span class="text-sm font-semibold text-[var(--ws-onboarding-accent)]">Profile</span>
</div>
<div class="mx-3 h-px flex-1 bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
</li>
<!-- Step 3: Upcoming -->
<li class="flex flex-1 items-center">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] text-sm font-medium text-[var(--ws-onboarding-text-soft)]">3</span>
<span class="text-sm text-[var(--ws-onboarding-text-soft)]">Preferences</span>
</div>
<div class="mx-3 h-px flex-1 bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
</li>
<!-- Step 4: Upcoming -->
<li class="flex items-center">
<div class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] text-sm font-medium text-[var(--ws-onboarding-text-soft)]">4</span>
<span class="text-sm text-[var(--ws-onboarding-text-soft)]">Complete</span>
</div>
</li>
</ol>
</nav>
<!-- Form content area -->
<div class="rounded-lg border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] p-6">
<h2 class="text-lg font-semibold text-[var(--ws-onboarding-text)]">Complete Your Profile</h2>
<p class="mt-1 text-sm text-[var(--ws-onboarding-text-soft)]">Tell us a bit about yourself so we can personalize your experience.</p>
<div class="mt-6 space-y-4">
<div>
<label for="display-name" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Display Name</label>
<input type="text" id="display-name" class="mt-1 block w-full rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-3 py-2 text-sm text-[var(--ws-onboarding-text)] placeholder-[var(--ws-onboarding-text-soft)] focus:border-[var(--ws-onboarding-accent)] focus:ring-1 focus:ring-[var(--ws-onboarding-accent)]" placeholder="Your name">
</div>
<div>
<label for="bio" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Bio</label>
<textarea id="bio" rows="3" class="mt-1 block w-full rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-3 py-2 text-sm text-[var(--ws-onboarding-text)] placeholder-[var(--ws-onboarding-text-soft)] focus:border-[var(--ws-onboarding-accent)] focus:ring-1 focus:ring-[var(--ws-onboarding-accent)]" placeholder="A short bio"></textarea>
</div>
</div>
</div>
<!-- Navigation buttons -->
<div class="mt-6 flex justify-between">
<button type="button" class="rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-onboarding-text)] transition-colors hover:opacity-80">Back</button>
<button type="button" class="rounded-md bg-[var(--ws-onboarding-accent)] px-4 py-2 text-sm font-medium text-[var(--ws-onboarding-accent-text)] transition-colors hover:opacity-90">Continue</button>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
onboardingstepperwizardmulti-stepform
Slots
| Name | Required | Description |
|---|---|---|
| steps | Yes | Step labels in the progress indicator. |
| content | Yes | Form content for the current step. |
| actions | Yes | Back and Continue navigation buttons. |
A horizontal step indicator with four stages (Account, Profile, Preferences, Complete), checkmarks for completed steps, and an active step highlight. Below the indicator sits a form content area with Back and Continue buttons.