Checkout
A multi-step checkout with shipping, payment method selection, and order summary.
Card
Form Wizard
Input
Label
Radio Group
Separator
Preview
Checkout
Complete your purchase in a few simple steps.
Order Summary
Wireless Headphones
$79.99
USB-C Cable
$12.99
Phone Case
$24.99
Subtotal
$117.97
Shipping
$5.99
Tax
$9.44
Total
$133.40
Code
<div class="w-full max-w-2xl mx-auto grid gap-6 lg:grid-cols-[1fr_280px]">
<BbCard>
<BbCardHeader>
<BbCardTitle class="text-2xl">Checkout</BbCardTitle>
<BbCardDescription>Complete your purchase in a few simple steps.</BbCardDescription>
</BbCardHeader>
<BbCardContent>
<BbFormWizard @bind-CurrentStep="currentStep"
CompleteLabel="Place Order"
Class="space-y-6"
ContentClass="min-h-[240px]">
<BbWizardStep Title="Shipping" Icon="truck" Description="Delivery address">
<div class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-2">
<BbLabel For="first">First Name</BbLabel>
<BbInput Id="first" Placeholder="John" />
</div>
<div class="space-y-2">
<BbLabel For="last">Last Name</BbLabel>
<BbInput Id="last" Placeholder="Doe" />
</div>
</div>
<div class="space-y-2">
<BbLabel For="address">Address</BbLabel>
<BbInput Id="address" Placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="space-y-2 col-span-2 sm:col-span-1">
<BbLabel For="city">City</BbLabel>
<BbInput Id="city" Placeholder="New York" />
</div>
<div class="space-y-2">
<BbLabel For="state">State</BbLabel>
<BbInput Id="state" Placeholder="NY" />
</div>
<div class="space-y-2">
<BbLabel For="zip">ZIP</BbLabel>
<BbInput Id="zip" Placeholder="10001" />
</div>
</div>
</div>
</BbWizardStep>
<BbWizardStep Title="Payment" Icon="credit-card" Description="Payment method">
<div class="space-y-4">
<div class="space-y-2">
<BbLabel>Payment Method</BbLabel>
<BbRadioGroup @bind-Value="paymentMethod" class="grid grid-cols-3 gap-3">
<label class="cursor-pointer">
<BbRadioGroupItem Value="card" class="sr-only peer" />
<div class="flex flex-col items-center gap-1 rounded-md border-2 p-3 text-center text-sm transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5">
<!-- credit-card icon SVG -->
Card
</div>
</label>
<label class="cursor-pointer">
<BbRadioGroupItem Value="paypal" class="sr-only peer" />
<div class="flex flex-col items-center gap-1 rounded-md border-2 p-3 text-center text-sm transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5">
<!-- wallet icon SVG -->
PayPal
</div>
</label>
<label class="cursor-pointer">
<BbRadioGroupItem Value="bank" class="sr-only peer" />
<div class="flex flex-col items-center gap-1 rounded-md border-2 p-3 text-center text-sm transition-colors peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5">
<!-- landmark icon SVG -->
Bank
</div>
</label>
</BbRadioGroup>
</div>
@if (paymentMethod == "card")
{
<div class="space-y-4">
<div class="space-y-2">
<BbLabel For="card">Card Number</BbLabel>
<BbInput Id="card" Placeholder="4242 4242 4242 4242" />
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<BbLabel For="expiry">Expiry</BbLabel>
<BbInput Id="expiry" Placeholder="MM / YY" />
</div>
<div class="space-y-2">
<BbLabel For="cvc">CVC</BbLabel>
<BbInput Id="cvc" Placeholder="123" />
</div>
</div>
</div>
}
<!-- Add similar blocks for paypal and bank payment methods -->
</div>
</BbWizardStep>
<BbWizardStep Title="Review" Icon="circle-check" Description="Confirm order">
<div class="space-y-4">
<p class="text-sm text-muted-foreground">
Review your order before placing it.
</p>
<div class="rounded-md bg-muted p-4 space-y-3 text-sm">
<div>
<span class="text-xs font-medium uppercase text-muted-foreground">Shipping</span>
<p class="mt-1">John Doe, 123 Main St, New York, NY 10001</p>
</div>
<BbSeparator />
<div>
<span class="text-xs font-medium uppercase text-muted-foreground">Payment</span>
<p class="mt-1">Card ending in 4242</p>
</div>
</div>
</div>
</BbWizardStep>
</BbFormWizard>
</BbCardContent>
</BbCard>
@* Order Summary Sidebar *@
<div class="space-y-4">
<BbCard>
<BbCardHeader>
<BbCardTitle>Order Summary</BbCardTitle>
</BbCardHeader>
<BbCardContent>
<div class="space-y-3 text-sm">
<div class="flex justify-between">
<span class="text-muted-foreground">Item 1</span>
<span>$79.99</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Item 2</span>
<span>$12.99</span>
</div>
<BbSeparator />
<div class="flex justify-between">
<span class="text-muted-foreground">Subtotal</span>
<span>$92.98</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Shipping</span>
<span>$5.99</span>
</div>
<div class="flex justify-between">
<span class="text-muted-foreground">Tax</span>
<span>$7.44</span>
</div>
<BbSeparator />
<div class="flex justify-between font-semibold text-base">
<span>Total</span>
<span>$106.41</span>
</div>
</div>
</BbCardContent>
</BbCard>
</div>
</div>
@code {
private int currentStep = 0;
private string paymentMethod = "card";
}