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 this demo.
My beef is with radios, and the inability to "uncheck" them (which is the default behaviour in all browsers as far as I know). We just had an issue when one of our clients insisted that we 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 behaviour is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be?
Do non-techie users even have an expectation of how radios work?
Is it likely that people are trying to deselect radio options by clicking them again, expecting a toggle, and getting frustrated?
Look at this mockup
How could this be changed to appear the same way with all options visible, using checkbox style controls and not require an empty radio that itself will require a label like
I don't want to fill in this field?
If someone clicks the wrong option by accident, they're locked into selecting one of the options.