• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.



Page history last edited by Jörn Zaefferer 10 years, 1 month ago


type: widget

release: TBD

status: in development - GitHub branch: formcontrols

documentation: N/A

demo: N/A





1 - Description:


This is a custom checkbox for situations where a standard checkbox does not fit the visual design system. Ideally, these should employ progressive enhancement and be created and works as a proxy to a standard checkbox. All standard checkbox behavior and accessibility features should be included in this widget. If we replace a standard widget, it should never lose features.


See also http://forum.jquery.com/topic/jquery-ui-checkbox-radio-button#14737000002542704


2 - Visual Design:





3 - Functional Specifications/Requirements:


(Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)



4 - Markup & Style:


     4.1 Initial markup examples


    <input type="checkbox" id="theid" />
    <label for="theid">Checkbox label</label>




        <input type="checkbox" />Checkbox Label


     4.2 Recommended transformed HTML markup


    <div class="ui-checkbox">
        <input type="checkbox" id="theid" />
        <label for="theid">Checkbox label</label>


     4.3 Accessibility recommendation


    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 


     4.4 CSS & Theme


    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 



5 - Latest version of plugin:







6 - Open issues being discussed


(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)





Comments (23)

jeremylea said

at 1:12 pm on Jun 26, 2009

I believe my checkbox plugin, http://plugins.jquery.com/project/ui-checkbox, meets all the requirements for this... Although it could do with some testing and code cleanup.

Jonathan Gotti said

at 1:46 pm on Jun 26, 2009

Hi just have a quick look at your plugin.
First it look nice in firefox3 at least. but not under ie6, where it become really difficult to see where are the inputs.
Your plugin make huge use of browser detection and imho should be avoid if possible.
I see that you add extra span arround the original input but leave the original input in place, i think that to achieve a consistent look whatever browser is used you perhaps should simply replace the native input element with a proxy (your span element may do the job) and delegates events to the native element and vice-versa so toggling the visual enhanced checkbox would toggle the hidden native element and changing the state of the original element should be reflected in the enhanced visible element.
Anyway thanks for your job, hope you will enhance it and i'll can use it soon to enhanced my forms to a full ui-theme available form :)

scottjehl said

at 9:40 am on Jul 2, 2009

Hi all,
Over at Filament Group, we just put out an article with a greatly simplified approach to this checkbox plugin (and for radio inputs as well). We think this approach should really be considered for UI, especially given the simplicity and native accessibility it affords.
It's not themeroller-ready yet, though it could be made so with minimal effort.

You can check it out here:

Please leave any feedback on the article, and we'll commit a UI-framework based version to UI labs shortly.

sompylasar said

at 4:42 pm on Aug 22, 2009

I've recently created checkbox & radiobutton for my job and decided to follow the jQuery UI & Themeroller specs. Please, have a look:

Richard D. Worth said

at 5:11 am on Apr 21, 2010

I created a git branch called 'formcontrols' for the development of this widget as well as http://wiki.jqueryui.com/Radiobutton . Here's the checkbox testpage so far:


Next we need to figure out whether we need any additional markup and how we're going to do the images. Will we reuse jQuery UI Icons? Will we have separate image files for checkboxes and radio buttons? Filament Group, would love to get your thoughts in particular, when you get a chance. Thanks.

Eric Hynds said

at 3:06 pm on May 14, 2010

It seems that maintaining separate checkbox and radio button widgets would be a gross duplication of effort? The only difference would be the icon class, no? The browser would handle the rest.

Richard D. Worth said

at 6:55 pm on May 14, 2010

Radio buttons are always a set and checkboxes are always independent, so there are potentially more differences than just that it's a different image, depending on what ends up being required in the implementation. If it turns out that the implementations do in fact share 98% of code they could become one widget, or each extend the same base widget. In any case, they'll have separate wiki pages for now but are both being developed in the same formcontrols branch, so nothing prevents them from growing together easily if it comes to that.

Yanick said

at 10:28 am on May 20, 2010

I also agree about radio buttons being merely "checkboxes" within a group of "checkboxes", using different style to differentiate them... Heck! Having those two using the same base class could also allow the feature of having "exactly n elements selected among a group of given checkboxes". For radio buttons, the group would only allow 1 element per group...

aurelien gerits said

at 2:06 am on Jul 6, 2010

A quick fix for the css

/* Checkbox
.ui-checkbox { position: relative; }
.ui-checkbox .ui-checkbox-inputwrapper { width: 0; height: 0; overflow: hidden; }
.ui-checkbox label { display: block; position: relative; padding-right: 1em; line-height: 1; padding: .0em 0 .5em 20px; margin: 0 0 .3em; cursor: pointer; z-index: 1; }
.ui-checkbox .ui-checkbox-box { position: absolute; top: 0; left: 0; width: 0.8em; height: 0.8em; }

aurelien gerits said

at 4:39 am on Jul 6, 2010

How to add the highlight class on the checked checkbox and if not remove highlight and add the default class

this.element.bind("click.checkbox", function() {

this.element.bind("focus.checkbox", function() {
if ( that.options.disabled ) {
.removeClass( "ui-state-default" )
.addClass( "ui-state-highlight" );
.removeClass( "ui-state-highlight" )
.addClass( "ui-state-default" );
.removeClass( "ui-state-default" )
.addClass( "ui-state-highlight" );*/

this.element.bind("blur.checkbox", function() {
if ( that.options.disabled ) {
.removeClass( "ui-state-highlight" )
.addClass( "ui-state-default" );

this.checkboxElement.bind("mouseover.checkbox", function() {
if ( that.options.disabled ) {
.removeClass( "ui-state-default" )
.addClass( "ui-state-hover" );

this.checkboxElement.bind("mouseout.checkbox", function() {
if ( that.options.disabled ) {
.removeClass( "ui-state-hover" )
.addClass( "ui-state-default" );

pilou said

at 7:02 am on Aug 23, 2010

Seems like this widget doesn't work in dialog yet.

Glen said

at 8:42 am on Sep 25, 2010


1. Preload the "tick" image.
2. Tri-state?

phazei said

at 11:34 am on Oct 7, 2010

Tri-state would be cool, but seems it would go too far beyond the basic checkbox concept.
By tri-state, you'd need to decide if that was 3 total values "unchecked" "checked-value1" "checked-value2", which would be more like turning it into a select box which changes it's core functionality, which is bad.

OTOH, sticking with the 2 values, but having a icon change only, like a half check if there is some sub-group of checkboxes, that could be up to the developer to implement, but might be within the scope of the checkbox. Perhaps there should at least be some hook so you can monitor some group of checkboxes and have the ability to change the icon if some condition is true (like all in the group checked).

This functionality is very common in compiled applications, so seems like it should integrate nicely conceptually. A "half-check" icon should at least be in the theme icon sets.

Zlati Pehlivanov said

at 9:22 am on Oct 20, 2010

@aurelien gerits
check this out
the third state is actually on key press
@phazei you logic isn't for a normal chackbox , but for some other kind of a switch that has nothing to do with a checkbox.

i have also thoughts about adding a cookie function, because on refresh the checkbox doesn't seem to save its state,
as it is with a normal non styled checkbox element

aurelien gerits said

at 9:47 am on Oct 20, 2010

What is the URL to get the latest jquery ui version 1.8.5 compatible?
I can not find in github
Best regards

dochoffiday said

at 3:13 pm on Jan 19, 2011

Why not just use something like the Button widget, but also have the icons alternate on state changes?


This, in my opinion, is more visually appealing.

Scott González said

at 3:57 pm on Jan 19, 2011

If that's what you want then just use button, but I wouldn't recommend replacing checkboxes and radio buttons with standard buttons. There are times when it's a good idea, but it's definitely not a universally good idea.

dochoffiday said

at 4:26 pm on Jan 19, 2011

It doesn't replace it with a button element, the Button widget just styles a checkbox a certain way. You'll notice that the example given with the 'text' option set to 'false' is almost identical to the current checkbox plugin.

Benjamin Sterling said

at 1:38 pm on Jun 25, 2011

I've posted my version of jQuery UI Checkbox and jQuery UI Radio button to my github fork (https://github.com/bmsterling/jquery-ui) and without making this comment long winded I've created a post on my site to explain the reasoning and where I am coming from on my approach http://benjaminsterling.com/jquery-ui-checkboxradio-buttons/. Some key points/goals I had:

1. I really liked how Dijit was doing their checkboxes and radio buttons and the passed a very tough set of 508 testing for the Post Office (http://yourotheraddress.com/form_signup.asp not the exact version I was working but helped the dev make it work, the other version should be on usps.com in the next few months)
2. Most of the other implementations I've seen for jQuery and I have personally tested with the 508 tester I used all failed in one way or another.
3. The checkboxes and radio buttons really should function per normal form elements.

Any comments or concerns, please let me know.

Benjamin Sterling said

at 1:42 pm on Jun 25, 2011

Also a quick note, what I put together does not 100% adhere to the themeroller stuff, it is using the classes mentioned above but I am using icons that are not default. I will changed that in the future, no eta atm.

uline said

at 1:53 am on Aug 26, 2011

I have an other simple way to create the checkbox plugin as follows:

1. In HTML: <style type="text/css">.ui-icon-empty {background-position: -96px -224px;}</style>
2. mycheckbox({bSelected:true or false})
3. $.fn.checkbox = function(options) {
var defaults = {bSelected:false}
var opts = $.extend(defaults, options)
var bttIcon =("#" + (this.attr("id")) + " span:first")

var bCheck =opts.bSelected

if (bCheck==false){this.button({icons:{primary: "ui-icon-empty"},text: false})}
else {this.button({icons:{primary: "ui-icon-check"},text: false})}


if (bCheck==false) {
else {

Ted Goodridge said

at 8:39 am on Mar 5, 2012

Why not simply extend ui.button, and allow it to style the checkbox, but override the bit that hides the button text? Seems to me to be a good approach, since it takes advantage of pre-existing code...
I've been working on this, and will post code shortly.

Ted Goodridge said

at 9:09 am on Mar 5, 2012

Okay, here's a quick and dirty example, probably much better methods available to override default styling...

(function( $ ) {
$.widget( "ui.checkbox", $.ui.button, {
_create: function() {
this.options.text = false;
this.options.icons = {primary: "ui-icon-locked"}
var labelSelector = "label[for='" + this.element.attr("id") + "']";
var labelWidth = ($(labelSelector).width());
this.buttonElement.css({'overflow':'visible', 'width':20, 'height':20, 'margin-right':(labelWidth+30), })
.find('.ui-button-text').css({'text-indent':'20px', 'margin-top':'-.5em'});

You don't have permission to comment on this page.