← All Examples

Color Swatch Picker

Radio buttons styled as color circles with a :checked ring indicator — zero JavaScript.

Published May 31, 2026

Demo

Pick a color

Product variant

HTML

<input type="radio" name="color" id="c1" checked>
<label for="c1" style="background: #ff6b6b"></label>

<input type="radio" name="color" id="c2">
<label for="c2" style="background: #38bdf8"></label>

CSS

input[type="radio"] { display: none; }

label {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .15s, transform .15s;
}

label:hover { transform: scale(1.1); }

input:checked + label { outline-color: var(--text); }

How it works

Each radio input is hidden with display: none. Its paired <label> is styled as a colored circle using a CSS custom property --c for the background color. The :checked selector targets the hidden input, and since the label is its immediate sibling, input:checked + label adds a visible outline ring to show the selection — all without JavaScript.