How to Transform Checkboxes in to Buttons

By, Emily Ellison

Because I love data, I've come to love forms too. One of my concerns when building a website is how to get people to fill out my forms, so that they will graciously give me their data.

From 2009 to 2011, the prevalence of smart phones more than doubled, expanding from 18% to 44% (Nielsen - The Mobile Media Report). Because of this explosion, many companies have been scrambling to transform their website to be mobile-ready. And for the forms in your website, there is an even more basic step than resizing that you can take to prepare your website for the mobile world.

Look at your fingers. Unless you are under the age of two, your fingers are poorly designed for checkboxes. Checkboxes are frustrating to check on your phone! You have to zoom in and be precise in your tapping. And when you're just trying to get a visitor to hit the very last "I accept these terms and conditions" box to complete their form, the last thing you want is to have them abandon ship out of frustration.

Luckily, it turns out that transforming checkboxes to buttons is actually a lot simpler than I originally thought.

A Simple Form

In this example, I'm going to build a form for a puppy hotel, where owners can share the puppy's name and breed, and select whether or not he/she wants to shell out the extra money for playtime.


Convert Your Checkbox to a Button

Have you ever noticed that clicking the checkbox label on a form checks the checkbox for you? This piece of information is enough to get us started.

First, hide your checkbox, by adding a style selector to it.


Next, update your stylesheet by choosing different color schemes for the 'unchecked' and 'checked' classes.


Finally, add the 'unchecked' class to your label to give your label an initial styling when the page first loads.


So now, you’ve hidden an ugly checkbox. The only problem is that we've just used the 'unchecked' class for styling, and the user doesn’t know if the checkbox (or now - button) has been selected or not. To fix this, we need to add some jQuery to implement toggle functionality.

Add Toggle Functionality to Your New Button

Because we want the button style to change when we click on the label, we need to add an id to our label, so we can reference it with jQuery.


Next, create a new javascript document, and add a bit of jQuery to toggle the class of the label when the checkbox is checked. In this case, we’re toggling the class ‘checked’. When the checkbox is unchecked, the label will just have the class we assigned previously: ‘unchecked’. When the checkbox is checked, another class will be added, so the label will have the class: ‘checked’.


And that’s it. Your form has replaced a menacing checkbox with a user-friendly toggle button!