checkout multi-step wizard payment ecommerce checkout multi-step wizard steps payment progress flow multi-step checkout flow checkout wizard with progress indicator
Checkout Multi-Step
Fetch pattern JSON:
curl https://webspire.de/patterns/checkout/multi-step.json multi-step.html
<div class="ws-checkout mx-auto max-w-2xl">
<nav aria-label="Checkout steps" class="mb-8">
<ol class="flex items-center justify-center gap-4 text-sm">
<li class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-checkout-action-bg)] text-[var(--ws-checkout-action-text)]" aria-hidden="true">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</span>
<span class="font-medium text-[var(--ws-checkout-text)]">Shipping</span>
</li>
<span class="h-px w-8 bg-[var(--ws-checkout-border)]" aria-hidden="true"></span>
<li class="flex items-center gap-2" aria-current="step">
<span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-checkout-action-bg)] text-sm font-semibold text-[var(--ws-checkout-action-bg)]">2</span>
<span class="font-semibold text-[var(--ws-checkout-text)]">Payment</span>
</li>
<span class="h-px w-8 bg-[var(--ws-checkout-border)]" aria-hidden="true"></span>
<li class="flex items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--ws-checkout-border)] text-sm text-[var(--ws-checkout-text-soft)]">3</span>
<span class="text-[var(--ws-checkout-text-soft)]">Review</span>
</li>
</ol>
</nav>
<form class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6" aria-label="Payment information">
<h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Payment Details</h2>
<div class="mt-6 space-y-4">
<div>
<label for="ms-card-number" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Card Number</label>
<input type="text" id="ms-card-number" name="card-number" autocomplete="cc-number" placeholder="1234 5678 9012 3456" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="ms-expiry" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Expiry Date</label>
<input type="text" id="ms-expiry" name="expiry" autocomplete="cc-exp" placeholder="MM/YY" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
<div>
<label for="ms-cvv" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">CVV</label>
<input type="text" id="ms-cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<button type="button" class="rounded-lg border border-[var(--ws-checkout-border)] px-5 py-2.5 text-sm font-medium text-[var(--ws-checkout-text-soft)] transition hover:opacity-80">Previous</button>
<button type="button" class="rounded-lg bg-[var(--ws-checkout-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-checkout-action-text)] transition hover:opacity-90">Next</button>
</div>
</form>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
checkoutmulti-stepwizardpaymentecommerce
Slots
| Name | Required | Description |
|---|---|---|
| step-indicator | Yes | Step progress bar showing completed, current, and upcoming steps. |
| payment-form | Yes | Payment form fields for the current step (card number, expiry, CVV). |
| navigation | Yes | Previous and Next navigation buttons. |
Multi-step checkout flow with a horizontal step indicator at the top (Shipping, Payment, Review). Current step displays a payment form with card number, expiry, and CVV fields. Previous/Next buttons for step navigation.