One checkbox or two radio buttons? Is there a case where both are acceptable?

Question

I read an interesting article talking about the philosophy behind the use of checkboxes versus radio buttons. Of course, in most cases you would argue that the decision is pretty obvious because radio buttons are predominantly used for a single mandatory selection from a number of options (of a reasonable size hopefully) while checkboxes are for non-mandatory multiple selection from a number of options.

Of course, at the end of such articles, the author notes that the answer to the question is that it really depends on the use case as I described previously.

I wonder if there actually is an effect or difference that asking yes/no questions using radio buttons or checkboxes has on the users, since the article gathers a lot of opinions and ideas but it would be interesting to see actual research on this.

Also, I have a suspicion that there might be cases in which there is no difference how the user input is collected, even though we are used to certain types of questions being asked one way (e.g. opt-in/opt-out using checkboxes) and certain types of questions being asked another way (e.g. gender using radio buttons). I supposed the problem is that you have to ask a question in the affirmative or negative with checkboxes, so maybe there is no scenario in which both options can be equivalent.

Answer 1

The purpose of the Radio Button is to select only ONE of the other choices. And the purpose of the checkbox is can select MULTIPLE choices. So in my opinion, the application of both of them is hard to found because each of those components has its own purpose.

Answer 2

Are you you asking about (1) a screen with multiple yes or no questions and (2) after the user selects the answer, you want the user to be able to see that the question has been answered, as well as, his/her answer?

https://material.io/design/interaction/states.html#selected See Selected.

If you have "chip" with Yes and No labels, first the color of the chip container should change after it is selected which is the most common way of showing something is selected. Adding a check appears fine.

Answer 3

The article you link to already touches on this point: bias.

There are two cases:

1. Tri-state

Both checkboxes and radio button groups can be "tri-state", at least at their initial state: greyed checkbox, nothing selected in the radio group.

In this case, the bias is subtle: the check requieres 1 click for one choice, but 2 clicks for the other choice. Whereas the radio button group requieres 1 click for any option; only the order of the options may cause some bias.

2. No tri-state

In this case, the GUI has already chosen an option! The radio button group shows there are 2 options, but the checkbox (almost?) hides that.

Worst if the checkbox is not or cannot be tri-state, but the radio button group can be fully unselected at the start.

---

Another difference.

Microsoft UI design guidelines for check boxes and radio buttons state, e.g.:

If there are only two possible options that can be expressed clearly as a single binary choice, such as on/off or yes/no, combine them into a single check box or toggle switch control. For example, use a single check box for "I agree" instead of two radio buttons for "I agree" and "I don't agree."

So a single checkbox is appropriate for "predicates", true/false, on/off, yes/no choices. (And then, I think it is more natural if the "positive" option is the one checked.) That is, the unchecked option means "not-the-checked-option".

Whereas a two-radio-button group is more appropriate for 2 "non boolean" options, such as "red or blue", "2-door car or 4-door car", "now or later", "in place or in another window", etc.

---

From the "opt-in" versus "opt-out" debate (or issue) you can see how all these details interact. :-)