Search form

Replacing checkboxes with itoggles in drupal administration

Why get rid of checkboxes?

Checkboxes are one of those interface elements that cause a lot of usability issues. Due to their size it is difficult for a lot of people to actually tick a checkbox - even with a mouse. Some browsers make the label of the checkbox clickable as well which makes it slightly easier to use. But once you try using your thumb (or other fingers) on a touch interface it will probably take a few attempts until you actually manage to hit it.

Design wise checkboxes are a little annoying too because the operating system has complete control over the looks of the checkbox.

The solution is to replace checkboxes with something that's more user friendly, works on all devices and can be designed in a consistent way. There are many java script based solutions out there but we've decided to go for the "itoggle" project.

Our sandbox

After days of fiddling around with existing itoggle javascripts (that caused a ridiculous amount of bugs) we've decided to implement our own itoggle button from scratch. You can find our prove of concept in the Itoggle poc sandbox - together with some install instructions.

It's a simple seven sub-theme that replaces all checkboxes with itoggles. Using our code you can also implement it with any other theme out there (we use a fork of the rubik theme).

To make our script work we had to patch some core-JS files. The patch is included in the sandbox. The reason is that simply changing the checked attribute on a checkbox doesn't seem to fire any events. So we made all core JavaScripts fire events explicitly whenever they change the state of a checkbox. Hopefully we found all of those cases … Maybe it's worth including that patch in D8 ?!

The script relies on a special browser behavior (click events being passed from the label to the checkbox) and should work fine in most modern browsers. But we definitely still got some cross-browser testing to do.

Have fun toggling!

Tags:

Share this!

Comments

It's cool but I think the spacing around the checkbox good enough for finger users and not a problem for mouse users. Also, Drupal has a hidden feature (selecting a checkbox range by holding down SHIFT + mouse click)

I can appreciate that toggles may work better on a touch screen, but they take up so much room on a regular screen. If you're building a biggish site and it has 8 or 10 user roles, those toggles will make it impossible to see anything on the permissions page. Your example screenshot already is wider than 960px (1527px, actually). Are you really going to manipulate that page on your iPhone?

That's a valid point - many parts of Drupal 7 administration are not really mobile friendly at all and the permissions page is one of them (for other reasons than checkboxes). But step for step we'll get there and the iToggle is something we've needed for quite some time.

Generally I also think that it's important to not think of any sections of Drupal administration as "desktop only" sections. Everything should be accessible / usable for mobile - even the permissions.

Regaring space / size: The iToggle can also be decreased in size, the picture can be replaced to make it "blend in" and you can still keep the padding. What I'm saying is that the iToggle will provide you with full control over your checkbox. You can even render it differently for touch interfaces and desktop.