Making checkboxes behave like radio buttons

[sovetski]

Actually, we have radio and checkboxes. But there are 2 problems:

• With radio, once we select an element, we can no more unselect it (except if we renew the page), so we say automatically "ah lets use checkbox"
• With checkbox, it fixes the problem above, but adds another problem: we can not make it unique as radio for each inputs with the same name

I know that we can achieve it by javascript, but it is something that we need everytime, if we use javascript on each situation, it is like to invent the wheel each time.

What I suggest:

If there is another checkbox with the same name and we have "unique" attribute, like "required", we can select only one of them.

<input type="checkbox" name="testoption" value="1" unique /> Option 1
<input type="checkbox" name="testoption" value="2"  /> Option 2

Or directly for radios, a new attribute "unselectable"

<input type="radio" name="testoption" value="1" unselectable /> Option 1
<input type="radio" name="testoption" value="2"  /> Option 2

To make it more clear, there is an example of Google Form, which support it by default: https://forms.gle/hcT2B9VJP1Nd6cuY7

[bathos]

If you want there to be a radio option that represents “none”, it must be explicit. This is also how these controls work in OS user interfaces (and it’s how the physical buttons-on-radios that the name “radio button” comes from work, too).

Exclusivity is the defining characteristic of radio buttons. Non-exclusivity is the defining characteristic of checkbox groups. A “unique” checkbox is a radio button, so I don’t think this option makes much sense. These concepts are broader than HTML, and it’s unclear how this would work with assistive technology; you’d need to change the role of the checkbox to radio because these exclusivity/non-exclusivity semantics are definitional.

[zcorpan]

I agree with @bathos, the solution here is to use a default-checked radio button that is the "unselected" selection.

[tabatkins]

I do still feel that the fact radio buttons can have an initial "nothing selected" state that can never be returned to by user action is a weird behavior. A radio button group is not definitionally selected; that's an accident of the current interaction behavior. (And it's not always the case in physical radio buttons either; sometimes you can press the currently-selected button to unpress it.)

An attribute you could place on a radio button that allows it to be unselected would make sense to me.

[zcorpan]

Do UI frameworks allow radio buttons to be unselected?

[sovetski]

@zcorpan UI framework I don't know maybe, but if you try "Google forms" and you create a form, you have "multiple choice" which is a "radio". And on the front end, you can select one of radios like usual, but you can click again on the selected element to unselect it

[MrHBS]

I don’t think I have ever came across a radio group with unselected radio. This feels wrong.

[sovetski]

@MrHBS It's pretty much like everything, once a human being gets used to something, a change feels weird. But if we think otherwise, why can we submit a form without having checked any checkbox but not radio?

For me, the "radio" is made to allow to select a single element in a group of elements.

Anyway, if you don't have the "required" attribute, you can very well submit a form without having checked any of the radios. So having the possibility to "deselect" the choice we made by mistake seems normal to me, otherwise we have to renew the current page to cancel our choice.

[tabatkins]

I don’t think I have ever came across a radio group with unselected radio. This feels wrong.

Every radio group you have ever used on any website is initially unselected, unless the author explicitly sets one of them to selected in the markup. So yes, you have absolutely come across many, many examples of this.