onboarding stepper wizard vertical sidebar onboarding vertical-stepper sidebar-wizard multi-step form vertical step wizard with sidebar onboarding with side navigation
Onboarding Vertical
Fetch pattern JSON:
curl https://webspire.de/patterns/onboarding/vertical.json vertical.html
<section aria-label="Onboarding wizard" class="ws-onboarding mx-auto max-w-4xl px-4 py-12">
<div class="flex gap-8">
<!-- Vertical stepper sidebar -->
<nav aria-label="Onboarding steps" class="w-56 shrink-0">
<ol class="relative space-y-0" role="list">
<!-- Step 1: Completed -->
<li class="relative pb-8">
<div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-accent)]" aria-hidden="true"></div>
<div class="flex items-center gap-3">
<span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-onboarding-accent)] 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>
</li>
<!-- Step 2: Active -->
<li class="relative pb-8" aria-current="step">
<div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
<div class="flex items-center gap-3">
<span class="relative z-10 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>
</li>
<!-- Step 3: Upcoming -->
<li class="relative pb-8">
<div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
<div class="flex items-center gap-3">
<span class="relative z-10 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>
</li>
<!-- Step 4: Upcoming -->
<li class="relative">
<div class="flex items-center gap-3">
<span class="relative z-10 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="flex-1">
<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="v-display-name" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Display Name</label>
<input type="text" id="v-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="v-bio" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Bio</label>
<textarea id="v-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>
<label for="v-website" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Website</label>
<input type="url" id="v-website" 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="https://example.com">
</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>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
onboardingstepperwizardverticalsidebar
Slots
| Name | Required | Description |
|---|---|---|
| steps | Yes | Vertical step labels with connecting lines. |
| content | Yes | Form content area for the current step. |
| actions | Yes | Back and Continue navigation buttons. |
A vertical stepper layout with step indicators and connecting lines in a left sidebar, and the form content area on the right. Completed steps show checkmarks, the active step is highlighted, and upcoming steps are dimmed.