Radio buttons with none selected

  • I feel like there's an answer out there but I can't find it.

    We have a situation where customers need to choose one of two options for billing their services, but we can't choose it for them.

    I've toyed with a dozen options, including some proposed by co-workers.

    Here are the scenarios:

    1. Use checkboxes like radio buttons:

    Checkboxes as radio bittons

    Here, neither is checked by default, clicking one or the other activates it and deselects the other.

    I don't like this option as it doesn't follow checkbox conventions.

    2. Radio buttons with a checkbox "enabler".

    Radio buttons enabled by checkbox

    This has the advantage of making clear that no option is currently enabled (especially if they're greyed out) and enabling the checkbox then enables the radio buttons.

    The problem here is that a radio button "must" be checked (traditionally). I've been struggling to find a precedence where no radio button is already selected but haven't found one.

    If an unselected radio button is an option, there's no need for the checkbox.

    3. Dropdown/pop-up box

    A drop-down menu will allow for a "null" option but, given that there are only three options (including null), it seems like overkill.

    It's also important to note that, once they choose either option, they cannot go back and choose the null choice.

    Even as I write this, I'm leaning toward the "radio buttons with none selected but once one is chosen, they just toggle like normal radio buttons."

    I guess the questions are:

    1. Is there a better way?
    2. How much of a sin is an unselected radio button?

    I think to summarize the answers, you have to know a rule to know when to break the rule (or when it is sensible to make an assumption that it is okay to break the rule), but then you need to test and see if it is indeed a suitable use case to break the rule (otherwise it is just another unvalidated assumption that may or may not cause issues later on). So I don't think you'll know until you pick a sensible starting point and just try it out.

    I am not quite sure what you mean by "we can't choose it for them". If you have site statistics, they might tell you the preferred option. Or do you mean you looked at site statistics and they say both options are used 50%? If there is a solid preference in this data, I'd recommend selecting the more frequent option. (If it's an even split, I'd recommend the unselected radio buttons... but I would try hard to avoid that and any other solution :-)

    All radio buttons placed inside a groupbox will be unchecked by default.

    Is there any reason you can't leave unselected radios and just present an error message if the user tries to proceed without providing a response?

  • Matt Obee

    Matt Obee Correct answer

    6 years ago

    Don't make checkboxes behave like radio buttons and don't make radio buttons behave like checkboxes.

    It is perfectly acceptable for the radio group to have no default selection in some situations. For example, Microsoft's guidelines for radio buttons give the following examples:

    Don't have a default selection if:

    • There is no acceptable default option for safety, security, or legal reasons and therefore the user must make an explicit choice. If the user doesn't make a selection, display an error message to force one.
    • The user interface (UI) must reflect the current state and the option hasn't been set yet. A default value would incorrectly imply that the user doesn't need to make a selection.
    • The goal is to collect unbiased data. Default values would bias data collection.
    • The group of radio buttons represents a property in a mixed state, which happens when displaying a property for multiple objects that don't have the same setting. Don't display an error message in this case since each object has a valid state.

    I've seen un-defaulted radio buttons work well. My one (minor) reservation in some cases -- as Adria Perez Pia says -- is the option of returning to a "clean" state. One option, that possibly makes radio buttons too much like check-boxes for some people, is have clicking a selected radio button un-select it, so all are cleared (as at the start). Another might be to have a "Clear/reset" button/action, possibly in the bottom-right of the group of buttons.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM