Custom Checkbox and Radio Buttons using Nucleo

About a week ago, we released two new Nucleo categories: interactive icons and animated loops!

Preview/edit the demo on Codepen: https://codepen.io/claudiar/pen/pdNLyy

The first time you hear about Nucleo? Learn more and download the app for free:
https://nucleoapp.com/

Let’s see how to use them to create custom checkbox and radio buttons!

We’ll start with a basic html form template:

Basic HTML form structure

Now we can grab the code of the checkbox and radio icons from the Nucleo app. Each icon is composed of visual elements (paths, circles, polygons…), and a script that generates the animation.
We can remove the script element from the svg code of our checkbox/radio icon and paste it right before the body closing tag (or include it in a separate .js file).
The remaining svg code (visual elements) can be pasted right inside each label tags. For the radio list, for example, we will end up with something like this:

Radio buttons list with custom svg icons

Now let’s add some style! We want to hide both radio and checkbox input and replace them with our custom Nucleo icons:

Style for custom checkbox and radio input

Note that we have been using a .js class and made the style descendent from that class. That’s because we want to replace our native input elements only if JavaScript is enabled.
You could use a library like Modernizr that will automatically add a .js class to your html element if JavaScript is enabled.

Now that we have the style in place, we just need to add a little bit of JavaScript to trigger our animation. The idea is: when a ‘change’ event is detected (which means one of the input elements has been checked/unchecked), we trigger our icon animation.

Trigger custom icons animation when inputs are checked/unchecked

You can download the complete code from GitHub.

Here is a preview of the final result on Codepen: