Customizing Components: Radio Button

Once again I’m here sharing with you one of Wolox’s custom HTML components. This isn’t as hard as the previous one talking about Range Input, but it’s very useful because radio buttons are used everywhere. First of all, let me show you an image of the result and how the HTML looks, then we’ll discuss the “behind the scenes” right after the code.

So let’s start talking about the structure, there’s a wrapper div with class .radio that will determine the size of the whole element. There’s an input inside of it with type radio which is the real radio button that will be kept transparent to make it interactive but not visible. The radio button’s background style will be handled using a ::before pseudo-element in the .radio and the fill will be represented with a div. This is because we need to make it change when that input is selected and a ::after pseudo-element can’t be targeted with a sibling selector. So we add the div with class .radio-fill that will show the styled UI when its related input is selected.

Now that we have a solid structure, let’s style the whole thing. I’ll show you the code first and then we’ll analyze it as we did before.

At the top of the SCSS file you can see some variables that allow you to customize the radio button in a deeply way. After that, you’ll see the container element which defines the size and also the ::before used for create the background. Following, there’s an input which I applied as “opacity: 0” to make it invisible. Finally we have the fill values, I animated the way the radio button is filled using “.radio-input:checked ~ .radio-fill” selector.

That’s all you need to create your own customized radio buttons, no JS needed as you would expect.
To conclude, I’m leaving the CodePen we created, so you can use the code wherever you want. If you haven’t checked our custom slider, you can do it by clicking here.