Turn your checkboxes into iPhone-style binary switches

Am I the only one who has to think twice every time I see one of those controls; "does the text mean that it's currently off, or does it mean that sliding it over there will turn it off"?

It's not accessible. In my tests, I attached a label to the checkbox. Clicking the label text doesn't trigger a switch.

Tests show standard UI inputs are understood the best. Just use the checkbox for your website.

Ironically, it doesn't work on an iPhone.

Actually, don't. I can't tab to them and hit space to select them. They take up more room. They break labels. They are ambiguous.

If you are interested in a jQuery style plugin see our tutorial we did a few months back which does the same thing<p><a href="http://labs.engageinteractive.co.uk/itoggle/" rel="nofollow">http://labs.engageinteractive.co.uk/itoggle/</a><p>(Should work on your iphone too)

Incase some don't know, jQTouch.com has this functionality, and many other native-looking iPhone effects.<p>I realize the purpose of this one is for non-mobile web browsers, but just putting it out there. ;)

Very cool, but absolutely don't use for a functional web-app unless you want to confuse your users.

I used this for<p><a href="http://pastebin.me/" rel="nofollow">http://pastebin.me/</a><p>slightly confusing, but a checkbox didnt quite work either

Would be cooler if it used CSS transitions.

Nice work!

The only usability advantage over a regular checkbox would be if you could copy and paste the ON or OFF state. but this solution you end up with "option ONOFF" on the clip board.<p>here is my solution, done when he first announced this gadget.<p><a href="http://github.com/gcb/iphone-style-checkboxes" rel="nofollow">http://github.com/gcb/iphone-style-checkboxes</a><p>feel free to fork it and implement his new spify animation.

I was kind of surprised that something so trivial required JQuery or Prototype. Really now?

It's fun to switch a switch.