Button groups, toggle buttons and radio buttons

[lvivier]

I've added toggles and radio buttons as in issue #81. There's a fiddle to play with, and they look like this:

• The attached buttons are called "button groups". In the OS X interface guidelines they're called "segmented controls"; jQuery UI calls them "button sets". Suggestions?
• These rely on some Javascript, and it's the first time I've ever written unit test cases (!) so maintainers should scrutinize those probably.

[kasperp]

Very nice

[dator-zz]

i'm +1 ! Very nice job !

[dashed]

I really like this! Though, the toggle animation seems un-natural in Chrome 15 beta.

[nunziofiore]

+1, i d like to see it on bootstrap too

[olvlvl]

That's nice, but I'd rather have labels with inputs in them, so that I can actually retrieve the values when I post my forms. Here is an update to your fiddle :

http://jsfiddle.net/olvlvl/tjVbC/

In my opinion a ".radio" class should for a single element, not a group of elements. That's why I renamed the class ".radio" to ".radio-group".

PS: On the JS part I did what I could with my limited knowledge of jQuery, you see I'm a MooTools guy :)

[goshacmd]

👍 looks nice!

[analytically]

Sexxxy!

[pearkes]

@olvlv The text can be too easily selected on press. Looks kind of ugly. Some sort of onselect fix?

[lvivier]

@olvlvl Great—in my case I didn't want to send the values to the server, but this is ideal. I'll update the pull request shortly.

@pearkes We can use

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;

on the label and it should be all good.

[batuhan]

perfect!

[necolas]

Looks a bit like what I did here - https://github.com/necolas/css3-facebook-buttons

[mdo]

Awesome work :).

Since this can't be merged automagically, I took a stab at just coding this from your fiddle example. Haven't added the radio or checked options yet, just built it using anchors. It merges some of your markup and that of @necolas to start.

Check it out in the 2.0-wip branch and let me know what you think.

[lvivier]

Right on! That looks great. Clearly I have lots to learn about LESS.

Since the basics are in now, I'll close this request and work from 2.0-wip from now on.