type: widget
release: TBD
status: in development - GitHub branch: formcontrols
documentation: N/A
demo: N/A
TODOs
- Review how jQuery Mobile implements radio and checkbox buttons
1 - Description:
This is a custom radiobutton for situations where a standard OS radiobutton does not fit the visual design system. Ideally, these should employ progressive enhancement and be created and works as a proxy to a standard radiobutton. All standard radiobutton 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
(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )
4.2 Recommended transformed HTML markup
(The HTML markup structure and classes that will be used by the scripts in the enhanced version)
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:
(Link to the latest version in the jQuery UI trunk here)
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 (6)
jeremylea said
at 1:13 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.
scottjehl said
at 9:45 am on Jul 2, 2009
Hi all,
Over at Filament Group, we just put out an article with a greatly simplified approach to this radio button plugin (and for checkboxes 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!
Carsten Klein said
at 2:29 pm on Aug 13, 2009
please increase the contrast for the disabled state, especially when it is an selected, but disabled radio button.
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:
http://maninblack.info/_proj/jquery-ui-checkbox-radiobutton/demos/checkbox-radiobutton/
aurelien gerits said
at 2:26 pm on Jul 6, 2010
Hello I can not find ui radio git.
Is it possible to have the direct link to retrieve this widget?
I want to work on it:)
Best regards
Zlati Pehlivanov said
at 1:52 pm on Jan 22, 2011
me too, apparently nobody is working on it right now, but I've looked at the sompylasar's solution, and I must say it good, but i hate the jquery ui radio checked icon. It should be filled circle - use the ui-icon-bullet instead.
You don't have permission to comment on this page.