clickable checkbox lables

When you are like me and you see a checkbox with a label next to it, you'll click the label to switch the state of the checkbox. If you don't know this handy shortcut try it out it works almost everywhere. People expect it to work and it drives them nuts if it don't.

checkbox in Java/Swing

In modern programming languages or GUI frameworks, let's say Java or therefor swing, the checkbox and it's label is one component. To add one to your UI you write something like this:

container.add(new JCheckBox("click me!"));

and you get something like this:



Like I said, you can change the state of the checkbox by clicking the label.

Checkboxes in HTML

In HTML thing look a little different. The checkbox is a component without a label attribute or something, and often you find this:

<input value="foo" type="checkbox"> I'm just dumb text

What gives you this, a checkbox and some tet nearby... crap.

I'm just dumb text

You can fix this by making the text a label and point the for attribute of the label, t the id of the component, like this:

<input value="foo" type="checkbox" id="bar"><label for="bar">yes, I'm clickable baby!</label>

gives:

yes, I'm clickable baby!


Conclusion

Making checkbox labels clickable is important, if it isn't for you, maybe for other users of the software you write. Make your checkboxes clickable!

I my humble opinon, the HTML idiom is a mess and so much the worse, webframeworks like e.g. JSF have copied this. I'll write aboutthis in a followup post.