T-shirt print picker
A T-shirt that switches print at once: Breton stripes, polka dots, gingham or tartan, each with its own swatch.
Settings
Code
<fieldset class="uvq04-tee"><legend>Print</legend><div class="pv" aria-hidden="true"><svg viewBox="0 0 100 92"><defs><pattern id="uvq04-tee-st" width="8" height="8" patternUnits="userSpaceOnUse"><rect class="w" width="8" height="8"/><rect class="a" width="8" height="3.4"/></pattern><pattern id="uvq04-tee-dt" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="r" width="10" height="10"/><circle class="w" cx="2.5" cy="2.5" r="1.7"/><circle class="w" cx="7.5" cy="7.5" r="1.7"/></pattern><pattern id="uvq04-tee-gn" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="w" width="10" height="10"/><rect class="r h" width="10" height="5"/><rect class="r h" width="5" height="10"/></pattern><pattern id="uvq04-tee-tt" width="16" height="16" patternUnits="userSpaceOnUse"><rect class="r" width="16" height="16"/><rect class="a h" y="4" width="16" height="7"/><rect class="a h" x="4" width="7" height="16"/><rect class="y" y="13" width="16" height="1"/><rect class="y" x="13" width="1" height="16"/></pattern></defs><path class="sh" d="M34 6C39 12 61 12 66 6L88 15L97 36L81 42L79 87H21L19 42L3 36L12 15Z"/><path class="ln" d="M34 6C39 14 61 14 66 6M19 42L21 17M81 42L79 17"/></svg></div><div class="op"><label><input type="radio" name="uvq04-tee" checked><span class="sw st" aria-hidden="true"></span><span class="nm">Stripes</span></label><label><input type="radio" name="uvq04-tee"><span class="sw dt" aria-hidden="true"></span><span class="nm">Polka dots</span></label><label><input type="radio" name="uvq04-tee"><span class="sw gn" aria-hidden="true"></span><span class="nm">Gingham</span></label><label><input type="radio" name="uvq04-tee"><span class="sw tt" aria-hidden="true"></span><span class="nm">Tartan</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.
More in Radio buttons
See all Radio buttonsWhere to use it
This radio group dresses an SVG T-shirt in the print you choose. Four round fabric swatches, Breton stripes, polka dots, gingham and tartan, sit under the garment, and each one swaps the shirt fill to a matching SVG pattern with a small springy turn. It suits clothing shops, print-on-demand tools, uniform builders and fashion lookbooks.
The main color drives the stripes and tartan bands, the secondary color the dots and checks. Add a print by defining another SVG pattern with a prefixed id and a swatch made of CSS gradients that matches it.