Commerce block

Checkout Address & Payment

The full autocomplete token set that lets a browser fill eight fields in one tap, plus address labels that follow the selected country.

259 lineslucide-reactAdded 8 Aug 2026Updated 11 Sept 2026

checkout
payment
address
autocomplete
form

What's included

components/checkout-form.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add checkout-form

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/checkout-form.tsx

'use client'

/**
 * <CheckoutForm> — contact, delivery address, and payment.
 *
 * The autocomplete tokens are the whole point of copying this rather than
 * typing it. `given-name`, `family-name`, `address-line1`, `postal-code`,
 * `cc-number`, `cc-exp` — these are what let a browser fill an eight-field
 * checkout in one tap, and getting them wrong or omitting them is the
 * single largest avoidable source of checkout abandonment on mobile.
 *
 * `autocomplete="cc-number"` also needs `inputmode="numeric"`: without it
 * a phone shows the alphabetic keyboard for a card number.
 *
 * Address fields are ordered and labelled for the selected country rather
 * than assuming a US shape. "State / ZIP" on a form someone is filling in
 * from Yorkshire is a small thing that reads as "we did not think about
 * you".
 */

import * as React from 'react'
import { Lock, CreditCard } from 'lucide-react'

export interface Country {
  code: string
  name: string
  /** What the postal field is called here. */
  postalLabel: string
  /** What the sub-national field is called, if there is one. */
  regionLabel?: string
}

export interface CheckoutFormProps {
  countries?: Country[]
  onSubmit?: (values: Record<string, string>) => void
  className?: string
}

const DEFAULT_COUNTRIES: Country[] = [
  { code: 'GB', name: 'United Kingdom', postalLabel: 'Postcode', regionLabel: 'County' },
  { code: 'US', name: 'United States', postalLabel: 'ZIP code', regionLabel: 'State' },
  { code: 'IE', name: 'Ireland', postalLabel: 'Eircode', regionLabel: 'County' },
  { code: 'DE', name: 'Germany', postalLabel: 'Postleitzahl' },
  { code: 'IN', name: 'India', postalLabel: 'PIN code', regionLabel: 'State' },
]

export function CheckoutForm({
  countries = DEFAULT_COUNTRIES,
  onSubmit,
  className = '',
}: CheckoutFormProps) {
  // Per-instance ids. A literal id in a reusable component is a
  // collision waiting for the second copy on the page — and a <label>
  // then resolves to whichever input rendered first.
  const uid = React.useId()
  const [country, setCountry] = React.useState(countries[0])

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    onSubmit?.(Object.fromEntries(data) as Record<string, string>)
  }

  return (
    <form onSubmit={handleSubmit} className={`space-y-8 ${className}`}>
      {/* Contact */}
      <fieldset>
        <legend className="mb-4 text-lg font-bold tracking-tight">Contact</legend>

        <Field
          id={`${uid}-email`}
          name="email"
          label="Email"
          type="email"
          autoComplete="email"
          placeholder="you@example.com"
          hint="Order confirmation and delivery updates go here."
          required
        />
      </fieldset>

      {/* Delivery */}
      <fieldset>
        <legend className="mb-4 text-lg font-bold tracking-tight">Delivery address</legend>

        <div className="grid gap-4 sm:grid-cols-2">
          <Field id={`${uid}-given-name`} name="givenName" label="First name" autoComplete="given-name" required />
          <Field id={`${uid}-family-name`} name="familyName" label="Last name" autoComplete="family-name" required />
        </div>

        <div className="mt-4">
          <label htmlFor={`${uid}-country`} className="mb-1.5 block text-sm font-medium">
            Country
          </label>
          <select
            id={`${uid}-country`}
            name="country"
            autoComplete="country"
            value={country.code}
            onChange={(e) =>
              setCountry(countries.find((c) => c.code === e.target.value) ?? countries[0])
            }
            className="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary"
          >
            {countries.map((c) => (
              <option key={c.code} value={c.code}>
                {c.name}
              </option>
            ))}
          </select>
        </div>

        <div className="mt-4 space-y-4">
          <Field id={`${uid}-address-line1`} name="addressLine1" label="Address" autoComplete="address-line1" required />
          <Field
            id={`${uid}-address-line2`}
            name="addressLine2"
            label="Apartment, suite, etc."
            autoComplete="address-line2"
            optional
          />
        </div>

        {/* Labels follow the selected country, not a US default. */}
        <div className="mt-4 grid gap-4 sm:grid-cols-3">
          <Field id={`${uid}-city`} name="city" label="City" autoComplete="address-level2" required />
          {country.regionLabel ? (
            <Field
              id={`${uid}-region`}
              name="region"
              label={country.regionLabel}
              autoComplete="address-level1"
            />
          ) : null}
          <Field
            id={`${uid}-postal-code`}
            name="postalCode"
            label={country.postalLabel}
            autoComplete="postal-code"
            required
          />
        </div>

        <div className="mt-4">
          <Field id={`${uid}-tel`} name="tel" label="Phone" type="tel" autoComplete="tel" optional hint="For delivery questions only." />
        </div>
      </fieldset>

      {/* Payment */}
      <fieldset>
        <legend className="mb-1 text-lg font-bold tracking-tight">Payment</legend>
        <p className="mb-4 flex items-center gap-1.5 text-xs text-muted-foreground">
          <Lock aria-hidden className="h-3.5 w-3.5" />
          Encrypted in transit. We never see your full card number.
        </p>

        <div className="relative">
          <Field
            id={`${uid}-cc-number`}
            name="ccNumber"
            label="Card number"
            autoComplete="cc-number"
            // Numeric keypad on mobile — omitting this is why card entry
            // feels broken on a phone.
            inputMode="numeric"
            placeholder="4242 4242 4242 4242"
            required
          />
          <CreditCard
            aria-hidden
            className="pointer-events-none absolute end-3.5 top-9 h-4 w-4 text-muted-foreground"
          />
        </div>

        <div className="mt-4 grid gap-4 sm:grid-cols-2">
          <Field
            id={`${uid}-cc-exp`}
            name="ccExp"
            label="Expiry"
            autoComplete="cc-exp"
            inputMode="numeric"
            placeholder="MM/YY"
            required
          />
          <Field
            id={`${uid}-cc-csc`}
            name="ccCsc"
            label="Security code"
            autoComplete="cc-csc"
            inputMode="numeric"
            placeholder="123"
            required
          />
        </div>

        <Field
          id={`${uid}-cc-name`}
          name="ccName"
          label="Name on card"
          autoComplete="cc-name"
          className="mt-4"
          required
        />
      </fieldset>

      <button
        type="submit"
        className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
      >
        <Lock aria-hidden className="h-4 w-4" />
        Pay now
      </button>
    </form>
  )
}

/** A labelled input. Every field on a checkout needs one — no placeholders-as-labels. */
function Field({
  id,
  name,
  label,
  hint,
  optional,
  className = '',
  ...input
}: {
  id: string
  name: string
  label: string
  hint?: string
  optional?: boolean
  className?: string
} & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div className={className}>
      <label htmlFor={id} className="mb-1.5 block text-sm font-medium">
        {label}
        {optional ? (
          <span className="ms-1.5 font-normal text-muted-foreground">(optional)</span>
        ) : null}
      </label>

      <input
        id={id}
        name={name}
        aria-describedby={hint ? `${id}-hint` : undefined}
        className="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary"
        {...input}
      />

      {hint ? (
        <p id={`${id}-hint`} className="mt-1.5 text-xs text-muted-foreground">
          {hint}
        </p>
      ) : null}
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/checkout-form.tsx and import it where you need the section:

import { CheckoutForm } from '@/components/checkout-form'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`countries`	`Country[]`	`DEFAULT_COUNTRIES`
`onSubmit`	`(values: Record<string, string>) => void`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

checkout-form.html

<!--
  Checkout Address & Payment — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<form class="space-y-8 ">
  <fieldset>
    <legend class="mb-4 text-lg font-bold tracking-tight">Contact</legend>
    <div class="">
      <label for="_R_0_-email" class="mb-1.5 block text-sm font-medium">Email</label>
      <input id="_R_0_-email" aria-describedby="_R_0_-email-hint" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" type="email" autoComplete="email" placeholder="you@example.com" required="" name="email" />
      <p id="_R_0_-email-hint" class="mt-1.5 text-xs text-muted-foreground">Order confirmation and delivery updates go here.</p>
    </div>
  </fieldset>
  <fieldset>
    <legend class="mb-4 text-lg font-bold tracking-tight">Delivery address</legend>
    <div class="grid gap-4 sm:grid-cols-2">
      <div class="">
        <label for="_R_0_-given-name" class="mb-1.5 block text-sm font-medium">First name</label>
        <input id="_R_0_-given-name" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="given-name" required="" name="givenName" />
      </div>
      <div class="">
        <label for="_R_0_-family-name" class="mb-1.5 block text-sm font-medium">Last name</label>
        <input id="_R_0_-family-name" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="family-name" required="" name="familyName" />
      </div>
    </div>
    <div class="mt-4">
      <label for="_R_0_-country" class="mb-1.5 block text-sm font-medium">Country</label>
      <select id="_R_0_-country" name="country" autoComplete="country" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary">
        <option value="GB" selected="">United Kingdom</option>
        <option value="US">United States</option>
        <option value="IE">Ireland</option>
        <option value="DE">Germany</option>
        <option value="IN">India</option>
      </select>
    </div>
    <div class="mt-4 space-y-4">
      <div class="">
        <label for="_R_0_-address-line1" class="mb-1.5 block text-sm font-medium">Address</label>
        <input id="_R_0_-address-line1" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="address-line1" required="" name="addressLine1" />
      </div>
      <div class="">
        <label for="_R_0_-address-line2" class="mb-1.5 block text-sm font-medium">Apartment, suite, etc.<span class="ms-1.5 font-normal text-muted-foreground">(optional)</span></label>
        <input id="_R_0_-address-line2" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="address-line2" name="addressLine2" />
      </div>
    </div>
    <div class="mt-4 grid gap-4 sm:grid-cols-3">
      <div class="">
        <label for="_R_0_-city" class="mb-1.5 block text-sm font-medium">City</label>
        <input id="_R_0_-city" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="address-level2" required="" name="city" />
      </div>
      <div class="">
        <label for="_R_0_-region" class="mb-1.5 block text-sm font-medium">County</label>
        <input id="_R_0_-region" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="address-level1" name="region" />
      </div>
      <div class="">
        <label for="_R_0_-postal-code" class="mb-1.5 block text-sm font-medium">Postcode</label>
        <input id="_R_0_-postal-code" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="postal-code" required="" name="postalCode" />
      </div>
    </div>
    <div class="mt-4">
      <div class="">
        <label for="_R_0_-tel" class="mb-1.5 block text-sm font-medium">Phone<span class="ms-1.5 font-normal text-muted-foreground">(optional)</span></label>
        <input id="_R_0_-tel" aria-describedby="_R_0_-tel-hint" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" type="tel" autoComplete="tel" name="tel" />
        <p id="_R_0_-tel-hint" class="mt-1.5 text-xs text-muted-foreground">For delivery questions only.</p>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend class="mb-1 text-lg font-bold tracking-tight">Payment</legend>
    <p class="mb-4 flex items-center gap-1.5 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock h-3.5 w-3.5" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>Encrypted in transit. We never see your full card number.</p>
    <div class="relative">
      <div class="">
        <label for="_R_0_-cc-number" class="mb-1.5 block text-sm font-medium">Card number</label>
        <input id="_R_0_-cc-number" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="cc-number" inputMode="numeric" placeholder="4242 4242 4242 4242" required="" name="ccNumber" />
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card pointer-events-none absolute end-3.5 top-9 h-4 w-4 text-muted-foreground" aria-hidden="true">
        <rect width="20" height="14" x="2" y="5" rx="2"></rect>
        <line x1="2" x2="22" y1="10" y2="10"></line>
      </svg>
    </div>
    <div class="mt-4 grid gap-4 sm:grid-cols-2">
      <div class="">
        <label for="_R_0_-cc-exp" class="mb-1.5 block text-sm font-medium">Expiry</label>
        <input id="_R_0_-cc-exp" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="cc-exp" inputMode="numeric" placeholder="MM/YY" required="" name="ccExp" />
      </div>
      <div class="">
        <label for="_R_0_-cc-csc" class="mb-1.5 block text-sm font-medium">Security code</label>
        <input id="_R_0_-cc-csc" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="cc-csc" inputMode="numeric" placeholder="123" required="" name="ccCsc" />
      </div>
    </div>
    <div class="mt-4">
      <label for="_R_0_-cc-name" class="mb-1.5 block text-sm font-medium">Name on card</label>
      <input id="_R_0_-cc-name" class="w-full rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" autoComplete="cc-name" required="" name="ccName" />
    </div>
  </fieldset>
  <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock h-4 w-4" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>Pay now</button>
</form>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Checkout2 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

8 more blocks in Cart & Checkout

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Cart & Checkout

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Cart & Checkout blocks

View category

Slide-Over Cart Drawer

A basket panel with the dialog mechanics usually missing: focus trap, focus return, Escape to close and a background scroll lock.

Cart & Checkout256 lines1 dep11 Sept

Editable Cart Lines

Quantity steppers and remove-with-undo, with every total derived rather than stored so the basket can never disagree with itself.

Cart & Checkout199 lines1 dep10 Sept

Order Summary With Promo

Subtotal, discount, delivery and tax all derived from the lines, with the free-delivery nudge driven by the same threshold as the charge.

Cart & Checkout228 lines1 dep11 Sept

Express Payment Row

The wallet buttons above the form, and what they do to it: the address a wallet returns is shown and stays editable, and the row disappears entirely when no wallet is actually available.

Cart & Checkout258 lines1 dep

Gift Options Form

The gifting step, placed in the cart where it is a choice rather than at checkout where it is friction.

Cart & Checkout177 linesNo deps

Gift Card Purchase

The only checkout where the buyer is not the recipient - live preview, a send date with a stated timezone, and the confirm-the-address field that prevents the expensive typo.

Cart & Checkout361 lines1 dep

Checkout

Checking out as a guest. Sign in instead to use saved addresses and cards.

3 items£722.00

Guest Checkout

Guest as the default and the whole form, with a real autocomplete token on every field and the account offer moved to the end, where it costs one checkbox.

Cart & Checkout396 lines1 dep

Discount Offer Modal

The offer popup with four rules applied: triggered by intent, a decline button of equal weight, a dismissal that is remembered, and the terms on its face.

Cart & Checkout214 lines1 dep

Checkout Address & Payment

What's included

Works with

License

Preview

Source

Before you paste

Where it goes

Props

Not using React?

For AI

Used in these pages

8 more blocks in Cart & Checkout

Shipping one commercially

More Cart & Checkout blocks

Your bag(3)

Merino Crew Sweater

Cotton Oxford Shirt

Slide-Over Cart Drawer

Your bag

Merino Crew Sweater

Cotton Oxford Shirt

Leather Card Holder

Editable Cart Lines

Order Summary With Promo

Checkout

Express Payment Row

Sending this as a gift?

Gift Options Form

Send a gift card

Gift Card Purchase

Checkout

Guest Checkout

10% off your first order

Discount Offer Modal