Swatch picker
The row of color or material chips that lets a shopper choose a variant and immediately see the matching product image.
See it
What it is
A swatch picker is a row of visual option controls, usually color, fabric, finish, or pattern. Choosing one resolves a product variant and swaps the image, price, availability, and sometimes the rest of the gallery. A swatch can be a flat color, a cropped texture image, or a tiny product photograph. The name comes from the fabric and paint sample cards shoppers have flipped through in shops for a century.
Reach for swatches when seeing the difference is faster than reading a dropdown. Keep text labels available because names such as 'Oat' and 'Natural' may look nearly identical on a screen, and a printed fabric cannot be represented honestly by one CSS color.
Gotcha: color alone cannot communicate selected, unavailable, or sold-out state. Add a visible ring, a text label, and a disabled mark, and back every chip with a real radio input. Do not update only the hero image; the selected swatch must point to the same variant the cart will receive.
Ask AI for it
Build a swatch picker for Color and Material using native radio inputs inside labelled fieldsets. Render 32px circular chips from a background-color value or texture image, show selection with a 2px CSS outline, keep the option name visible, and mark unavailable variants using aria-disabled='true' and a diagonal line so they stay focusable and announced. On selection, resolve one variant and atomically update the main image, thumbnail set, price, stock state, SKU, add-to-cart payload, and variant URLSearchParams value. Support arrow-key navigation and expose the selected and unavailable states to screen readers.