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.

#My Questions#

#Example#

Look at this mockup: http://jsfiddle.net/f4vXj/1/

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 N/A or I don't want to fill in this field?

If someone clicks the wrong option by accident, they're locked in to selecting one of the options.

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.

My Questions

Example

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 N/A or 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.

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.

My question:

Surely this behavior is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be?

I'm thinking of going against the grain and writing some javascript to change this behavior, by default, for all future applications that I write. Is there any reason why I shouldn't?

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.

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.

#My Questions#

#Example#

Look at this mockup: http://jsfiddle.net/f4vXj/1/ 

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 N/A or I don't want to fill in this field?

If someone clicks the wrong option by accident, they're locked in to selecting one of the options.

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.

My question: Surely this behavior is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be? I'm thinking of going against the grain and writing some javascript to change this behavior, by default, for all future applications that I write. Is there any reason why I shouldn't? Any ideas for better solutions, other than having an extra option whose only function is to deselect the others?

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.

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.

My question:

Surely this behavior is deliberate and took a room full of experts to agree upon, but what could those reasons possibly be? 

I'm thinking of going against the grain and writing some javascript to change this behavior, by default, for all future applications that I write. Is there any reason why I shouldn't?

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.