Postage stamp shipping options
Each shipping speed is a stamp with perforated edges: choose one and an ink postmark lands on it with its waves.
Settings
Code
<fieldset class="uvq04-pst2"><legend>Shipping</legend><div class="op"><label style="--c:#2f7f73"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>2,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h13.5c2.5 0 4-1.6 4-3.6V12"/><circle cx="10" cy="12" r="5.2"/><path d="M10 12a2 2 0 1 1 2-2"/><path d="M18.5 12V7.5M20.5 12V8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Economy</span><small>5-7 days</small></label><label style="--c:#c98a2b"><input type="radio" name="uvq04-pst2" checked><span class="sp"><span class="st"><span class="in"><em>4,50 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Standard</span><small>2-3 days</small></label><label style="--c:#b23a3a"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>7,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 13.5l19-7-5.5 13-4-5z"/><path d="M12 14.5l9.5-8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Urgent</span><small>24 h</small></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
Shipping methods appear as three postage stamps with real perforated edges made with a CSS mask, each with a price, a line icon and a muted vintage colour. Choosing one tilts it slightly and drops a round postmark with wavy cancel lines on top, stamped with a springy scale. It suits checkouts, stationery shops and any delivery choice that deserves charm.
The main color is the postmark ink and the secondary one the stamp paper. Each stamp takes its own colour from the style attribute, so match them to your brand, and keep the name and delivery time short below each one.