HTML + CSSRadio buttons
Drawn ring radio
A ring traces itself around the chosen option, then the centre dot fills in right after.
Settings
16px
1x
Code
<div class="uv-rdr"><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Standard</label><label><input type="radio" name="rdr" checked><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Fast</label><label><input type="radio" name="rdr"><span class="rb"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10.5" pathLength="1"/></svg><i></i></span>Urgent</label></div>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
Where to use it
The ring drawing around the option feels like circling an answer with a pen, which suits choices with a sense of speed or priority: standard, express or urgent shipping at checkout, the turnaround at an online print shop or the priority of a support ticket. A radio button with an SVG ring, in HTML and CSS.
The two steps, ring first and dot second, take about half a second. That is fine for three or four options but feels slow in a long list. Label each option with the delivery time or the price to make the choice easier.