HTML + CSSRadio buttons
Paint swatch fan deck
A paint swatch deck opened like a fan: the chosen strip slides out and tints the wall behind it.
Settings
16px
1x
Code
<fieldset class="uvq04-fan"><legend>Wall colour</legend><div class="fn"><label style="--a:-50deg;--c:#c4673f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Clay</b> R-214</span></span></label><label style="--a:-30deg;--c:#d9a53a"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Mustard</b> Y-108</span></span></label><label style="--a:-10deg;--c:#8fa98a"><input type="radio" name="uvq04-fan" checked><span class="sw"><span class="nm"><b>Sage</b> G-322</span></span></label><label style="--a:10deg;--c:#2f6f8f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Ocean</b> B-517</span></span></label><label style="--a:30deg;--c:#6e3a5e"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Plum</b> V-640</span></span></label><label style="--a:50deg;--c:#aab4c0"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Fog</b> N-090</span></span></label><i class="rv" aria-hidden="true"></i></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Six paint strips are riveted at the bottom and spread like a real colour fan deck. Each strip shows three tints and a name with its code. The chosen strip slides out along its own angle and rises above the others, and the card behind it takes a soft wash of that paint, like a wall sample.
The paint colours live in each strip's style, so swap them for your brand palette, fabric finishes or wood stains. Five to seven strips keep the fan readable, and the arrow keys walk through them in order.