A simple jQuery UI widget to pretty up radio elements.


License: MIT

Language: JavaScript


A simple jQuery UI widget to pretty up radio elements. There is a suite of unit tests available in test/, written with Jasmine. You can see an example and run the tests on the plugin's website.

Since it works by manipulating and reading the events right off your native radio inputs, it fully respects tabbing and keyboard navigation/selection of items. This also means you can call the standard jQuery val methods, bind to the change event, etc right on the native element.

It also respects the disabled attribute and works with labels.

HTML structure required

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="undisclosed"> Undisclosed<br>

And then...


CSS classes

All the display is powered by CSS, check out src/jquery.customRadio.css for ideas, and then customize to your heart's content. Here are the four classes you need to implement:

  • ui-radioButton (default state)
  • ui-radioButton-checked
  • ui-radioButton-focus
  • ui-radioButton-disabled


  • destroy: remove the pretty widget, unbind events and show the original radio
  • disable: disable the widget, just like you would disable a radio button
  • enable: allow interaction with the widget after disabling it


You should bind to the change event on the native input element.

Project Statistics

Sourcerank 5
Repository Size 121 KB
Stars 12
Forks 0
Watchers 1
Open issues 1
Dependencies 0
Contributors 1
Tags 0
Last updated
Last pushed

Top Contributors See all

Thomas Rix

Something wrong with this page? Make a suggestion

Last synced: 2017-11-25 00:06:53 UTC

Login to resync this repository