20
Aug

Labelize: a jQuery plugin for making big honking labels

Labelize is a handy jQuery plugin that lets you give input-containing elements <label/> like properties, so that clicking on the container activates the input inside. The goal? To improve usability by giving hard-to-click input elements like radio buttons and checkboxes generous target areas. Surprisingly, this can’t be done with a <label/> element alone—if you want it supported in IE6, that is.

Say we have the following markup:

<div class="myLabel">
  <input type="checkbox"/>
</div>

To make the “myLabel” div become a label-like container for the checkbox its holding, we simply do the following:

<script>
  $('.myLabel').labelize()
</script>

That’s it! Now if we click anywhere on “myLabel”, the checkbox is clicked—and its onclick() event is fired too. Huzzah.

If you’d like to see the plugin in action, I’ve whipped up a quick project page with some working examples. Please have a look and let me know what you think.

Tagged with:    |

Commentary

Nice to see this as a plugin in jQuery. I did this same thing inside of our Reflect CMS (using Prototype) where we have checkboxes within a table of data. It is set so you can click anywhere in the row to select the checkbox (or radio button). In some cases, where we have visual cues to indicate, I removed the checkbox or radio button – but the container itself was still clickable/selectable (again, with the proper visual cues to make sure a user still recognizes it as a form).

The project page looks nice, this is slick!

Comment by Nate Klaiber on August 21, 2008

Hey Nate,

Yeah, I have a feeling this is the kind of thing that many people have been doing for a while now; we’ve certainly had similar, rougher code in the FreshBooks source for a while now. Labelize just aims to package it up in a convenient way.

Thanks for the feedback, btw.

Comment by Ben on August 21, 2008

Nice plugin Ben. I like that you use jQuery too. It’s the best.

Comment by Justin on August 22, 2008

PS How can I get that little cloud before the comment link on the blog? Is that Haloscan and Blog template?

Comment by Anny on October 10, 2008

Interesting work. I currently use FreshBooks and really enjoy the work you guys put in it. I believe we’ve shared a class or two at UofT, maybe CSC 407 with Greg. I’m currently applying at FreshBooks and was wondering if you could put a word in for me.

Cheers.

Comment by Nathan Duthoit on October 14, 2008