Deselecting an optional radio button in a form that mixes radio buttons and checkboxes

Question

The issue

I'm working on a form which currently has three radio buttons. Originally, we chose radio buttons as we only wanted a user to be able to select one option.

o Option 1 (Default selection)
o Option 2 (Has an accompanying textbox)
o Option 3

We have now have been told that we need to make changes to this form. Whereas before a user was only able to select a single option, the business now wants to allow a user to to be able to select up to two options.

Option 1 and Option 2 will remain as radio buttons, but Option 3 will become a checkbox. Users will now have the choice to select either Option 1 or Option 2, and also have the choice to select Option 3. Or, a user can just select Option 3, without having to select either Option 1 or Option 2. No option will be set as a default.

o Option 1
o Option 2 (Has an accompanying textbox)

-------------

[ ] Option 3

The problem

The issue I foresee with the updated design is that if a user accidentally selects Option 1 or Option 2 they will not be able to deselect it. This section is part of a larger form, so they can't just refresh the form.

I've spent all day trying to find an elegant solution that wont change this section radically, but to no avail.

Answer 1

Radio buttons, when properly used, include a non-selection. So you'd have

• None
o Option 1
o Option 2

This is the equivalent of a dropdown that has, for its first option, something like "Select One."

If you want de-selectable widgets, then use checkboxes. The dev team at my workplace has built a custom checkbox component that includes min and max values for the number of items selectable at once.

Answer 2

I miss a little bit of background about the need of mixing radio buttons and checkboxes in the same question, but I guess it may be the incompatibility between Option 1 and Option 2, so my recommendation would be a custom checkbox module that will disable Option 2 if Option 1 is checked, and also will disable Option 1 if Option 2 is selected:

Default state:

[ ] Option 1

[ ] Option 2

[ ] Option 3

Option 1 selected:

[X] Option 1

    Option 2

[ ] Option 3

Option 2 selected:

    Option 1 (disabled)

[X] Option 2

[ ] Option 3

Option 3 selected:

[ ] Option 1

[ ] Option 2

[X] Option 3

Of course, any other option will be compatible with Option 3:

[X] Option 1

    Option 2 (disabled)

[X] Option 3

Answer 3

How about:

o Only Option 3
o Option 1 without Option 3
o Option 1 with Option 3
o Option 2 without Option 3
o Option 2 with Option 3

[TextBox that is enabled only when option 2 is selected]