jQuery UI: Icon Radio Buttons

If you have a group of radio buttons, you can use the buttonset widget to make them look like a jQuery UI widget. That is, you call the buttonset() plugin on a container element, usually a div, and the widget groups the radio button labels together, and applies styles from the theme framework. For example, here's what a radio buttonset widget looks like by default.

Vertical Radio Button Groups

The jQuery UI buttonset widget, a group of buttons, can be used to group together form elements such as radio buttons. The label attached to the given radio control is used by the buttonset to display the button text. In other works, it'll format the labels with components from the theme framework while the radio is no longer visible, even though they're still used. The default layout for the buttonset widget is to stack the grouped buttons horizontally. With some style enhancements, we can make a vertical layout work with this widget.

Transition Support For Radio Buttons

The buttonset widget — a cousin of the button widget — is handy for working with groups of form controls. Not because any new functionality, because it isn't. It's more to do with themes and and they're applied to the elements. For example, the button widget doesn't add any capabilities not already present in native HTML buttons. It's all about consistent look and feel. The buttonset widget will take a group of radio buttons and make them appear as a single unified control. We can toggle the state of any given radio, and the appropriate states from the theme framework are applied. Why not add support for smooth transitions between these states?