<  Back to article list

Checkboxes Everywhere

Free them from shackles of forms!
or "A common component in not so common usages".

A younger me was once sailing through the sea of the interwebs, reading some blog posts on web development (and those sort of things) when I stumbled upon something eye opening. I forgot to bookmark it so I cannot share it with you… shame on me.

That blog post was essentially a description and demo implementation of a complex menu system without a single line of javascript. It had accordions, dropdown options, animated styles and so on. I can’t really imagine a reason why would anyone want a menu that complex on their website but that was clearly not the point.

It was all about the solution. So simple and yet so different: instead of relying on good ol’ javascript to manage states and add/remove classes accordingly to the user actions, it used a combination of labels, checkboxes, radio buttons and CSS to make everything work. Following is a simple attempt to recreate that menu (I really don’t remember exactly how it was).

See the Pen No JS Menu by Daniel Fontes (@dffontes) on CodePen.

So, what's going on here?
It's all a matter of using labels to control the checkboxes or radio buttons’ state, and the CSS :checked pseudo-selector paired with + or ~ sibling selectors, to style their sibling elements; you can style the background colours, border, dimensions, positions or whatever suits your needs.

If you take a quick look at the source code, you'll probably think "Wait, I've already seen this before" like I did.
Yep, you most likely did saw this before: lots of custom checkbox implementations follow a similar approach.

If menus and custom checkboxes can be made with this approach, surely other common web components can be implemented too.

Toggle button is essentially a checkbox, so making one was my first experiment.

See the Pen Toggle button with no Javascript by Daniel Fontes (@dffontes) on CodePen.

As you can see on the HTML tab, it has a really simple structure: a container, a checkbox and a label.
Don't be fooled by the CSS. It looks complex, but If we remove all the "makeup" we a get a fairly simple CSS. If the checkbox is not checked its siblings will have one look, the nod on the left side, but if checked they'll look differently, placing the nod on the right side, allowing us to create an "on/off" effect.

Lets try something different (or not). Go on and click/tap the following "Read more" button.

Cool, right? Yet it follows the same recipe (I did write "or not" in the previous paragraph): a hidden checkbox, a label (the "Read more" button) and CSS, again with extra "makeup".
The CSS of this example has lots of unnecessary beauty improvements just for hiding and showing text: the only CSS property affected by the hidden checkbox that really matters is the max-height applied to the text.

"But, can I apply this dynamically based on the element height?" Sure you can... with javascript. :D

Let me show you a different component: a modal dialog.

See the Pen Modal dialog with no Javascript by Daniel Fontes (@dffontes) on CodePen.

There isn't much to say about this example because... guess what, It's the same approach (again and again)! It simply uses a label acting as an open button, a label acting as a close button and a label as the background shield, all controlling the same (hidden) checkbox.

And what about an image lightbox? It's basically a modal dialog and you probably agree it's a more practical usage for the "modal" implementation. Go on and click the banana.

See the Pen Lightbox WIP by Daniel Fontes (@dffontes) on CodePen.

By now you might be thinking "Why should I care about this?".
The "checkboxes everywhere" approach might be a useful tool somewhere in the future when you find yourself developing a website where you have strict rules on what you might or might not use, or even where you're not allowed to use javascript at all.
For instance, have you ever built an AMP (Accelerated Mobile Page) ready website? Then you probably know by now that the usage of custom javascript is prohibited on AMP pages.
Here at Lookatitude we recently had to implement an AMP ready website where, in order to comply with our designer specification, we did use checkboxes everywhere! For instance, the "Read more" example was taken from there. Actually, that website was a cool playground to experiment some other development approaches, but more on that on a later post.

Hope this can be useful to you like it was for me.

P.S. Please, always remember to "use the right tool for the right problem". Your team colleagues and your future self will need to read and change your code, so don't go and write a 40 lines CSS if you can achieve the same result with just 4 well written javascript lines of code... :)

Miguel Pinto

Lookatitude CEO. Coder at heart. Aims to be the one who firstly opens the door for a great environment at the company, and who will ultimately drive people to share, learn and experiment.

Subscribe to Blook

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!