Hanging size tags
Kraft paper tags hanging from a string: the chosen size turns red and swings for a moment.
Settings
Code
<fieldset class="uvq04-tag"><legend>Size</legend><div class="rp"><i class="cd" aria-hidden="true"></i><label><input type="radio" name="uvq04-tag" disabled><span class="tg"><b>XS</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>S</b></span></label><label><input type="radio" name="uvq04-tag" checked><span class="tg"><b>M</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>L</b></span></label><label><input type="radio" name="uvq04-tag"><span class="tg"><b>XL</b></span></label></div><p class="nt">XS is sold out</p></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
Clothing sizes become kraft paper tags threaded on a sagging twine, each with a punched eyelet and a bold letter. Hovering tilts a tag, and choosing one turns it red and sets it swinging with a damped pendulum keyframe, while sold out sizes fade and get crossed out. It brings a handmade shop feel to fashion stores, merch pages and product configurators.
The main color is the chosen tag and the secondary color is the twine. Disabled inputs handle stock: add or remove the disabled attribute per size, and keep the note below in sync so shoppers know why a tag is greyed out.