

Turn boring HTML checkboxes into iPhone toggle switches - jqr
http://jqr.github.com/2009/08/05/iphone-toggle-switches.html

======
makecheck
This is a classic case of why you don't necessarily make a UI element look
like something real. Every time I used the toggle switches, I just wanted to
"swish" them with the mouse (a completely awkward gesture), even though they
technically respond to simple on/off clicks like checkboxes do. So all they've
done is make the "easy" behavior unintuitive, while almost encouraging an
awkward gesture.

~~~
mattp
I agree that we shouldn't automatically copy and past UI elements from one
platform to every other, unless they present real usability benefits to those
other platforms.

But one benefit I can see is that these switches increase the target area,
which I've always found to be somewhat small with checkboxes and radio
buttons...

~~~
DougBTX
The text label beside the radio button is clickable too, if the page author
has used the <label> tag correctly.

~~~
jqr
the entire control can be clicked to toggle, and yes it's composed of two
overlapping labels!

------
s3graham
Ack, please don't. Neither space nor tab work (at least in Chromium), and not
owning an iPhone, those things don't intuit "toggle" to me.

~~~
jrockway
Don't you get it, they're an Apple look-alike. How can you not like that!?

------
jcromartie
The only reason I'd want these is for a web page to be used on an iPhone. They
kill usability for keyboard-focused users.

~~~
barredo
Edit: it has keyboard support indeed. I've just tried and works perfect.
Pressing space switches the checkbox state and tab switches between
checkboxes.

It's a pretty damn good job.

<s>I bet it's not too dificult to add keyboard support to them</s>

~~~
kingsley_20
Non-obvious keyboard support is still _almost_ worthless.

~~~
jqr
I'm sure we'll add a focus highlight or something soon!

~~~
barredo
It would be nice to add a yellow/someothercolor border or change the colors to
a darker blue...

------
hyperbovine
Standards: who needs em.

------
barredo
This is the first iPhone-like toggle switches that works well and are usable.
Both with click and drag.

Edit: They are an improvement of these:
[http://awardwinningfjords.com/2009/06/16/iphone-style-
checkb...](http://awardwinningfjords.com/2009/06/16/iphone-style-
checkboxes.html)

Kudos to the author.

~~~
endtwist
Actually, mooSwitch has been around since 2008 and has always supported both
click and drag, however, I don't believe it actually works on the iPhone
(quite a thing to miss):

<http://reaktivo.com/mt/mooswitch/index.php>

------
slig
I tested other fancy option button like this in a very simple webapp and the
users doesn't seem to understand that they can change it.

for now on, I'll stick with the default, unless the web app is build to run on
the iPhone.

------
idleworx
just because it looks cool on another platform doesn't mean it's needed or
useful in a regular web browser. the majority of people who use web browsers
probably don't use an iphone, so the interface wouldn't make sense to them.

------
mjgoins
Let's just hope they're not patented.

------
TweedHeads
Absolutely beautiful!

------
sayrer
oh yeah, turn checkboxes into iPhone toggle switches. that's not boring! very,
very exciting.

what is wrong with you people?

