Checkbox

Page history last edited by Richard D. Worth 4 mos 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.

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>

    <label>
<input type="checkbox" />Checkbox Label
</label>

4.2 Recommended transformed HTML markup

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

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:

http://view.jqueryui.com/formcontrols/tests/visual/checkbox/checkbox.html

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 (11)

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.

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 :)

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:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

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

I've recently created checkbox & radiobutton for my job and decided to follow the jQuery UI & Themeroller specs. Please, have a look:
http://maninblack.info/_proj/jquery-ui-checkbox-radiobutton/demos/checkbox-radiobutton/

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:

http://view.jqueryui.com/formcontrols/tests/visual/checkbox/checkbox.html

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.

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.

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.

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...

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; }

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() {
that._refresh();
});

this.element.bind("focus.checkbox", function() {
if ( that.options.disabled ) {
return;
}
if(that.boxElement.not(":checked")){
that.boxElement
.removeClass( "ui-state-default" )
.addClass( "ui-state-highlight" );
}else{
that.boxElement
.removeClass( "ui-state-highlight" )
.addClass( "ui-state-default" );
}
/*that.boxElement
.removeClass( "ui-state-default" )
.addClass( "ui-state-highlight" );*/
});

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

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

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