forms - Why is it impossible to deselect HTML "radio" inputs?

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.

---

1. 
   

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

   
   


2. 
   

   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?

   
   
   


3. 
   

   Do non-techie users even have an expectation of how radios work?

   
   


4. 
   

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

Answer

You're not supposed to leave radio buttons blank. They're allowed to be blank so you can avoid setting defaults as mentioned in the question about setting a default gender. You can't not pick a gender, it's a required field, though you can leave a "prefer not to say" etc. option; this is different than the user never touching the radio button, however. If the field is required, not setting a default allows extremely useful behavior; You force the user to fill in the field and you don't assume a default.

Say it's an extremely important yes/no question; the user is legally responsible for this yes/no question. You can't pick a default setting for the user in this case! But still, this option can't be left blank, they have to commit to one or the other. How is this helpful? You catch this in validation (preferably in page). This lets you make sure the user has filled in the field, rather than assuming the default, which can be very important.

As for your extra question: Anyone that's used a web form (or many OS forms) is familiar with how radio buttons work since they're so common. The first time they see a radio button they might click it again to try and untick it, but they'll quickly learn. And more importantly, radio buttons function like many physical buttons in real life — originally named after buttons on radios that shared the same functionality.

You press in a button, it goes click, and it stays depressed in a state where the user can no longer press it again. Other buttons on the same control press out other buttons. Old cassette tape players used these; pressing fast-forward or play popped out the "Stop" button because both functions can't happen at the same time.

Users that have used buttons know you can't "unpush" a button. The difference with radio buttons is that some buttons push out other buttons.