6

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.

  • Are you able to share what the use case is and what the options are? What the user is actually doing would be useful. – Evil Closet Monkey Jun 13 '18 at 3:44
10

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.

  • A radio group with a "non-selection" is not to be considered "proper", nor is a drop-down with an option of "select one" - as both situations put the user into an immediate error state. If "none" is an accepted value, great! If not, it should not be provided. – Evil Closet Monkey Jun 12 '18 at 23:28
  • 1
    I think putting the user into an "immediate error state" is not as bad as preselecting something for the user and risk that he does not notice. – Pectoralis Major Jun 13 '18 at 6:27
  • As I see it, that immediate error state is the same as providing a required text field that's initially blank. – Ken Mohnkern Jun 13 '18 at 11:38
  • According to gb1986, 'None' is an acceptable value. – wootcat Jun 13 '18 at 14:38
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
-2

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]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.