Product cards — Variant picker

A product card with colour swatches and size radios above a cart action. Use it when shoppers can choose variants without opening a detail page.

ReactHTML

1440 × 480

Open in new tab

Component.tsx68 lines

export default function ProductCardVariantPicker() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-80">
      <div role="img" aria-label="Image placeholder: product photograph showing available variants" className="flex aspect-[4/3] h-24 w-full items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10">
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-5-5L5 21" />
        </svg>
      </div>
      <div className="mt-3 flex items-center justify-between gap-3">
        <h3 className="text-base font-semibold">Product name</h3>
        <p className="text-lg font-semibold">$48</p>
      </div>
      <fieldset className="mt-3">
        <legend className="text-xs font-medium">Colour</legend>
        <div className="mt-2 flex gap-3">
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-colour" value="white" aria-label="White" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex size-6 items-center justify-center rounded-full border border-neutral-300 bg-white text-neutral-900 peer-checked:[&_svg]:opacity-100 peer-checked:outline-2 peer-checked:outline-offset-2 peer-checked:outline-neutral-900 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 opacity-0"><path d="m5 12 4 4L19 6" /></svg>
            </span>
          </label>
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-colour" value="light" aria-label="Light grey" defaultChecked className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex size-6 items-center justify-center rounded-full border border-neutral-300 bg-neutral-300 text-neutral-900 peer-checked:[&_svg]:opacity-100 peer-checked:outline-2 peer-checked:outline-offset-2 peer-checked:outline-neutral-900 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 opacity-0"><path d="m5 12 4 4L19 6" /></svg>
            </span>
          </label>
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-colour" value="mid" aria-label="Mid grey" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex size-6 items-center justify-center rounded-full border border-neutral-300 bg-neutral-500 text-white peer-checked:[&_svg]:opacity-100 peer-checked:outline-2 peer-checked:outline-offset-2 peer-checked:outline-neutral-900 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 opacity-0"><path d="m5 12 4 4L19 6" /></svg>
            </span>
          </label>
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-colour" value="dark" aria-label="Dark grey" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex size-6 items-center justify-center rounded-full border border-neutral-300 bg-neutral-900 text-white peer-checked:[&_svg]:opacity-100 peer-checked:outline-2 peer-checked:outline-offset-2 peer-checked:outline-neutral-900 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 opacity-0"><path d="m5 12 4 4L19 6" /></svg>
            </span>
          </label>
        </div>
      </fieldset>
      <fieldset aria-describedby="product-card-variant-picker-size-hint" className="mt-3">
        <legend className="flex w-full items-center justify-between gap-2 text-xs font-medium">Size<span id="product-card-variant-picker-size-hint" className="font-normal text-neutral-500">XL unavailable</span></legend>
        <div className="mt-2 grid grid-cols-4 gap-2">
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-size" value="S" aria-label="Size S" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex h-9 items-center justify-center rounded-full border border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 transition-colors peer-not-checked:hover:bg-neutral-50 peer-checked:border-2 peer-checked:border-neutral-900 peer-checked:bg-neutral-900 peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">S</span>
          </label>
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-size" value="M" aria-label="Size M" defaultChecked className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex h-9 items-center justify-center rounded-full border border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 transition-colors peer-not-checked:hover:bg-neutral-50 peer-checked:border-2 peer-checked:border-neutral-900 peer-checked:bg-neutral-900 peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">M</span>
          </label>
          <label className="relative cursor-pointer">
            <input type="radio" name="product-card-variant-picker-size" value="L" aria-label="Size L" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex h-9 items-center justify-center rounded-full border border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 transition-colors peer-not-checked:hover:bg-neutral-50 peer-checked:border-2 peer-checked:border-neutral-900 peer-checked:bg-neutral-900 peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">L</span>
          </label>
          <label className="relative cursor-not-allowed">
            <input type="radio" name="product-card-variant-picker-size" value="XL" aria-label="Size XL" disabled aria-describedby="product-card-variant-picker-size-hint" className="peer sr-only focus-visible:outline-hidden" />
            <span className="flex h-9 items-center justify-center rounded-full border border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 transition-colors peer-disabled:cursor-not-allowed peer-disabled:bg-neutral-100 peer-disabled:text-neutral-600 peer-disabled:line-through peer-checked:border-2 peer-checked:border-neutral-900 peer-checked:bg-neutral-900 peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900">XL</span>
          </label>
        </div>
      </fieldset>
      <button type="button" aria-label="Add Product name to cart" className="mt-4 w-full inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Add to cart</button>
    </article>
  )
}

Pattern notes

When to use: Use for a compact product with a small fixed set of variants. Pick product-card-media-footer for products whose configuration needs a detail page. Variations: label the second fieldset with a different size scale, reduce colour options, or replace the media with a variant close-up.
Hierarchy: Read the image, 16px semibold name and 18px semibold price, then the Colour and Size legends, native radio choices and cart action. Visually hidden colour names are White, Light grey, Mid grey and Dark grey. Sizes are S, M, L and XL; M and Light grey start selected, and XL is disabled. Slots: name up to 3 words and price up to 6 characters. A short hint inside the Size legend identifies XL as unavailable and is linked with aria-describedby.
Responsive: The width changes from 288px to 320px at 640px. Both fieldsets remain horizontal, media stays 96px tall and the action stays 44px tall.
Layout: A 288px-wide bordered card (w-72), 320px at 640px, with 16px padding (p-4) and an 8px radius. A 96px-tall media band precedes a name/price row by 12px. Two fieldsets have 12px top spacing, 12px legends and 8px legend-to-options gaps. Colour contains four 24px round swatches with 12px gaps; size contains four 36px-high rounded-full pills in equal columns with 8px gaps. A full-width 44px primary action follows after 16px.
States: Selected swatches have a 2px neutral-900 outline and 2px offset; a check glyph becomes visible so forced colors preserve selection. Selected size pills fill neutral-900, use white text and a 2px border for forced colors. Peer focus draws a 2px outline offset 2px on each visible option. Hidden inputs use focus-visible:outline-hidden to preserve native forced-colors focus. Unselected enabled size hover fills neutral-50; disabled XL uses neutral-100, neutral-600, a not-allowed cursor and strike-through. Cart hover changes to neutral-700 and has the standard focus outline.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│ ┌────────────────────────────────────────────────────┐ │
│ │                       Image                        │ │
│ └────────────────────────────────────────────────────┘ │
│ Product name                                      $48  │
│ Colour       [White] [Light] [Mid] [Dark]              │
│ Size         [S]     [M]     [L]   [XL unavailable]    │
│ [                    Add to cart                    ]  │
└────────────────────────────────────────────────────────┘

View all

Product cards — Compact product order summary
Layout tags: stacked,media,numbers
Product cards — Digital product with included files
Layout tags: stacked,list,icons
Product cards — Featured product and related list
Layout tags: asymmetric,media,list

Product cards — Variant picker

Pattern notes

More in Product cards

Product cards — Compact product order summary

Product cards — Digital product with included files

Product cards — Featured product and related list