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.
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
~ 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.
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.
Let me show you a different component: a modal dialog.
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.
By now you might be thinking "Why should I care about this?".
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.