Variant Swatch Picker — Free HTML CSS JS Color & Size Selector Snippet

Almost every product with color or size options needs a variant picker, and the standard pattern is two independent single-select groups: circular color swatches and pill-shaped size buttons, each behaving as its own radio group. This snippet builds both, keyed off two plain JavaScript variables, with a live summary label showing the current combination.

How each group behaves like a radio group without radio inputs

Rather than native <input type="radio"> elements (which are harder to style into custom shapes like circular swatches), each swatch and size pill is a plain <button> with role="radio" and aria-checked. selectSwatch(btn) and selectSize(btn) each reset every button in their own group to aria-checked="false", then set the clicked button to "true" — the same "clear all, then set one" pattern used for tabs and filter chips elsewhere in this library, just applied per-group. The two groups are entirely independent — clicking a size never touches the color swatches and vice versa, since each function only ever queries its own .swatch or .size-pill class.

How the active swatch is highlighted

Rather than a checkmark icon (which would need to render legibly against any swatch color, including near-white ones), the active swatch gets a colored outline with outline-offset, forming a visible ring *around* the swatch rather than altering its fill. This works cleanly against every swatch color, including the light "Cloud" swatch, without needing per-color contrast logic.

How the live selection label works

Two module-level variables, selectedColor and selectedSize, hold the current choice from each group. Every time either selectSwatch or selectSize runs, it updates its own variable and calls a shared updateSelectionText() function, which writes both current values into the <strong id="selectionText"> element. Keeping the two variables outside any single click handler is what lets both groups update the same shared label independently, without needing to read the DOM back to reconstruct the current state.

Extending toward a real product page

In production, you'd typically use the selectedColor/selectedSize combination to look up a specific SKU's price, image, and stock status — for instance, swapping the product's main photo when a different color swatch is clicked, or disabling out-of-stock size pills for the currently selected color.