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

Family

onboarding

Tier

base

Kind

component

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.