Simple Standard Radio Button with SVG

Creates high resolution simple and standard radio button elements using pure SVG

Photo by Leonel Fernandez on Unsplash

I was looking for a simple, custom but standard radio button implementation that is nothing fancy and preferably used the least amount of CSS and HTML.

I couldn’t find one that satisfied me in those respects. So here you go! 🎊 💃 🎈

Pure HTML and (S)CSS

The result

Below is the version I implemented as a React component and styled with emotion: Edit(26/10/2018): For improved accessibility (credit)

The key to accomplish all this lies in these two circle elements:

<circle 
   className="radioOutline" // a selector you can target
   cx="17"  // offset along x-axis for the center of circle
   cy="17"  // offset along y-axis for the center of circle 
   r="15"   // the radius of the circle
   fill="none"   // this is how we get 'white' background here      
   stroke="black"   // color of the radio's outline. 
   strokeWidth="3"  // the fatness of the radio's outline                             
/>                               
<circle 
   className="radioDot" 
   cx="17" 
   cy="17" 
   r="8"   // the radius of the inner radio dot
   fill="red"   // color of the radio dot
/>

If you want to adjust the size of the radio button, change the values of the <svg> ‘s height , width and viewBox properties.

For example, to increase the dimension of your radio button to 50 x 50 (note the bold lines below):

<svg                               
   className="svg"                             
   fill="currentColor"                
   preserveAspectRatio="xMidYMid meet"                 
   height="50" 
   width="50"                               
   viewBox="0 0 50 50"                             
>                               
   <circle                                 
      className="radioOutline"                              
      // half of 50 to get its centre
      cx="25"
      cy="25"                                 
      // adjust lower if 25 overflows the bound
      r="23"                                 
      fill="none"                                 
      stroke="black"                                 
      strokeWidth="3"                               
   />                               
   <circle 
      className="radioDot" 
      // same thing as above
      cx="25" 
      cy="25" 
      // adjust for the size of the inner dot
      r="14" 
      fill="red" 
   />                             
</svg>

And that’s all from me on this front! Thanks for reading 🙏

Here is a good article for in depth understanding of viewBox :

Sara Soueidan - Freelance front-end Web developer, author & speaker

Photo by Allyson Weislogel on Unsplash