AIMRAN
Color del hilo
HTML + CSSRadio buttons

Thread spool colour picker

Wooden thread spools on a shelf: the chosen one rises, spins and lets out a strand that curls downwards.

Settings

16px
1x

Code

<fieldset class="uvq04-spl"><legend>Thread colour</legend><div class="rw"><label style="--c:#c8323a"><input type="radio" name="uvq04-spl" checked><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Poppy</span></label><label style="--c:#24365e"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Navy</span></label><label style="--c:#d39a2a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Mustard</span></label><label style="--c:#2f6b4a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Bottle green</span></label><label style="--c:#e6dcc6"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Ecru</span></label></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.

Markdown version with all the code, for AI assistants

More in Radio buttons

See all Radio buttons

Bouncing dot radio

Radio buttonsHTML + CSS

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

Radio buttonsHTML + CSS

Jumping dot radio

Radio buttonsHTML + CSS

Liquid fill radio

Radio buttonsHTML + CSS

Vertical tabs with light bar

Radio buttonsHTML + CSS

Pricing plan selector

Radio buttonsHTML + CSS

Where to use it

Five wooden spools of sewing thread stand on a small shelf, each one a real radio input. The chosen spool lifts off the shelf, its wound thread scrolls as if it were turning, and a loose strand draws itself below it with an SVG stroke. It suits haberdashery shops, embroidery kits, product colour options and craft blogs.

Each thread colour is set in the style of its label, so swap them for your own range. The main color tints the wooden flanges and the secondary one the shelf; keep names to one short word so they fit under each spool.