Color swatches

A <fieldset class="color-swatches"> holds one radio per color. Each radio shows as a round chip of its color, so Tab, the arrow keys and form submission keep their native behavior.

Put each radio in a <label> whose visually hidden text, such as "Purple", comes before the radio, and set --md-comp-color-swatch-color on the radio. The checked swatch gets a ring, so the choice does not depend on telling two colors apart.

<fieldset class="color-swatches">
  <legend>Label color</legend>
  <label><span class="visually-hidden">Purple</span><input type="radio" name="label-color"
    value="#6750a4" style="--md-comp-color-swatch-color: #6750a4" checked></label>
  <label><span class="visually-hidden">Green</span><input type="radio" name="label-color"
    value="#386a20" style="--md-comp-color-swatch-color: #386a20"></label>
  <label><span class="visually-hidden">Red</span><input type="radio" name="label-color"
    value="#b3261e" style="--md-comp-color-swatch-color: #b3261e"></label>
</fieldset>

Custom color

Add an <input type="color"> at the end of the group for a value outside the palette. It opens the browser's own picker and already shows as a matching round swatch. Give it its own name and its own label.

<fieldset class="color-swatches">
  <legend>Theme color</legend>
  <label><span class="visually-hidden">Purple</span><input type="radio" name="theme"
    value="#6750a4" style="--md-comp-color-swatch-color: #6750a4" checked></label>
  <label><span class="visually-hidden">Green</span><input type="radio" name="theme"
    value="#386a20" style="--md-comp-color-swatch-color: #386a20"></label>
  <label><span class="visually-hidden">Custom color</span><input type="color" name="theme-custom"
    value="#ff8800"></label>
</fieldset>

Tokens

Override these on the .color-swatches. Set the swatch color on each radio.