Why is it impossible to deselect radio buttons?

You might have come across forms where it is impossible to deselect radio buttons. Today, we will answer the question of why that’s the case.

Quick answer: you can’t uncheck a radio button by clicking it again. That is how radio buttons are designed to work: a group always has exactly one answer once you have chosen, and the only way to change it is to pick a different option. If you need to get back to no answer at all, you have three options:

1. Look for a Clear, Reset or "None of the above" option on the form.
2. Reload the page. In most browsers this clears the selection, though some will restore it, and you may lose other answers too.
3. In a PDF form, use the form’s reset button if it has one; PDF radio buttons usually behave the same way as web ones.

If you are the designer, the better question is why your users need to deselect at all. More on that below.

Presently, there are two kinds of checkbox-style controls available in HTML:

• The checkbox lets you toggle between on and off, and you can choose between many values.

• You can only select one value from a group in radio, and you can’t toggle off separate inputs.

Radio buttons

In a graphical user interface, an option button, often known as a radio button, is a control that allows the user to select only one option from a list of choices.

A common source of frustration for users is their inability to deselect radio buttons.

No matter how hard you try, you can’t turn off radio buttons by clicking on them. Another choice must be clicked to deselect the current one. Once a value has been selected, the answer can be changed, but the group can never be emptied again.

Take note of the three distinct radio button groups. There’s one for those who aren’t sure, one for those who are majoring in social science, and one for those who are studying the hard sciences.

Let’s choose one of each of them for fun:

That’s great, but now that the user is seriously weighing his options, he’d like to focus on only one major, but when he clicks on it to deselect it, he realizes that there’s no way to remove radio buttons from this list!

When a person mistakenly clicks on the wrong button, he might accomplish one of several things:

• Gives up and move on, leaving the three illegible choices in their wake.

• Refreshes the form, allowing the user to enter all of his information a second time.

The reason why it’s impossible to deselect HTML “radio” inputs

Radio buttons are not supposed to be left blank.

They can be left blank only if you do not want to use default values. This allows you to do things like force the user to fill in the form and not assume anything by default if it is required.

For example, the user has to answer an important ‘yes/no’ question. This yes/no question is vitally essential, and the user is legally liable for their answer. In this instance, there is no way to choose a default setting for the user.

However, this choice cannot be ignored; and the user will have to choose an option. You must be wondering how this is beneficial. Well, it assists you in verifying that the user actually entered something instead of just taking it as assumed.

Radio buttons are very popular and are known to anyone who has used a web form (or many OS forms). If they encounter a radio button for the first time, they may click it again to uncheck it, but they’ll get the hang of it fast. More importantly, radio buttons performed the same functions as many real-world buttons and were called after radio buttons on radios that shared the same functions. When you push a button, it clicks and remains pressed until you release it, making it impossible for the user to press it again. While pressing one button, the other buttons on the device will be pressed. These were found on vintage cassette tape players where pressing ‘fast-forward’ or ‘play’ simultaneously ejected the “Stop” button.

How to design around it

Users should never need to uncheck a radio button. If they do, the form is missing an option. The fixes, roughly in order of preference:

• Add the missing answer. The GOV.UK Design System points out that users cannot go back to having no option selected without refreshing, so it says to include "None of the above" or "I do not know" whenever those are valid answers. Nielsen Norman Group makes the same point: an explicit, neutral option is better than expecting people to leave the group blank.
• Use a checkbox instead. If the question is really a single yes or no that can be left unticked, it is a checkbox, not a pair of radios. Our dropdown vs radio button vs checkbox guide covers where each one fits.
• Add a "Clear selection" link next to an optional group, if there is no sensible "none" label.

Should one option be selected by default? The experts split here. NN/g says radio buttons should always have a default. GOV.UK says do not pre-select, because people are more likely to miss the question or submit the wrong answer. For questions where a wrong default has consequences, such as legal declarations, go with GOV.UK.

How to uncheck a radio button in HTML

There is no built-in way for users to do it, but a script can. Setting checked to false clears it, and form.reset() puts every field back to its original state:

<fieldset id="major">
  <legend>Major</legend>
  <label><input type="radio" name="major" value="arts"> Arts</label>
  <label><input type="radio" name="major" value="science"> Science</label>
  <button type="button" onclick="document.querySelectorAll('#major input').forEach(r => r.checked = false)">Clear selection</button>
</fieldset>

Keep in mind that, as MDN notes, an empty radio group is left out of the submitted form data entirely, so your server needs to handle a missing value. That empty state even has a name: CSS matches it with the :indeterminate pseudo-class, which applies to radio buttons in a group where none is checked.