Custom Form Checkboxes
Improve user experience by beautifying your checkboxes
Background
Default checkboxes in forms can be monotonous, which is fine when you’re signing away your rights, or claiming to have read through terms and agreements, but not when you need users to constantly interact with a form. Take Snapchat for example. When you take a picture, you can then select which friends to send it to by clicking on their name. This looks and feels a lot better than having to click a box next to their name. Luckily, it is not very difficult to make checkboxes more user-friendly. I recently built a job posting app with rails and needed an elegant way for users to select tags for their listings. As such, I will be using rails for this tutorial.
Step 1
Have some models with a many-to-many relationship and a need for a collection of checkboxes in a form, such as with bands selecting tour venues, or in my case, selecting tags for listings.
Step 2
Generate your basic form, and add checkboxes like this:
<%= form.collection_check_boxes :tag_ids, Tag.order(:name), :id, :name %>Start up your server and take a look. It should be pretty ugly.
Step 3
A word about collection_check_boxes real quick. For every element in your collection, in this case for every tag, an input of type checkbox and a label is generated. We can prove this by adding a block of code like so.
Take a look at your form again, and not much should have changed, but we are now able to easily edit the checkboxes.
Step 4
Now, let us remove the box itself, allowing a user to simply click on the text of the checkbox to select it. Add an HTML class to your label like so:
<%= tag.label class: "custom checkbox" do %>And the CSS code:
Perfect. We are now able to select checkboxes simply by clicking on text. Go ahead, try it. See a problem? While functional, it is impractical to have not have an indicator of a box being checked. So while you can now select checkboxes, how do you know which ones have been selected?
Step 5
You can use your imagination to think of ways to show indication that checkboxes are checked, but personally I think that changing the opacity of the ‘checkbox’ based on its status looks really nice. Wrap your tag text in a span element with another custom class:
<span class="checkmark"><%= tag.text %></span>And finally, add some more CSS
The code there is pretty self explanatory. The opacity of the text when the checkbox is unchecked will be less than when it is checked, or hovered over. It should look like this:
Conclusion
Perfect! Now you have much nicer looking ‘checkboxes’, and you can easily style them further by adding background colors to the span elements. In my own project, I dynamically added extra classes to the span element, changing background and text colors, and ended up with a product that looks like this:
Thanks for reading! I hope this helps you beautify your checkboxes and make your users’ experiences more pleasant!
