Previous title: Default behavior of HTML “radio” inputs: Did they get it wrong?
In HTML, there are currently two types of "checkbox" style controls:
- Checkbox: Allows toggling on/off, multiple values can be selected
- Radio: Only one value in a group may be selected, does not allow toggling off individual inputs
If anything is unclear, see demo: http://jsfiddle.net/GYU8n/
My beef is with radios, and the inability to "uncheck" them (which is the default behavior in all browsers as far as I know). We just had an issue with one of our clients insisting that we need to get rid of the "Not Applicable" radio option on a form, but the field is not required.
Here's the problem: If someone selects a radio option, perhaps by misclick, there's no way out unless a "blank" option is provided (wording irrelevant). Very much like a dropdown box that does not have a blank option, but the difference is that a dropdown box doesn't take up more room in the UI whether it has 2 options or 20. Having the selectable values already present on the screen, without the extra click that the dropdown needs, is great - so we use radios all the time.
I cannot comprehend why the radio type inputs cannot be toggled off by clicking the input, and why this behavior is the default. Clicking a different option is the only way to deselect the current one, but it's very likely that none of the options are required or applicable, so once a value is selected - a selection is "locked in", regardless of which one it is.
Surely this behavior is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be?
Extra: Do non-techie users even have an expectation of how radios work? Is it likely that people are trying to un-select radio options by clicking them again, expecting a toggle, and getting frustrated?
Example: Look at this mockup: http://jsfiddle.net/f4vXj/1/ How could this be changed to appear the same way (all options visible, using checkbox style controls), and not require an "empty" radio, that itself will require a label like "n/a" or "I don't want to fill in this field". If someone mis-clicks an option, they're locked in to selecting one of the options.