Is there any recommended control for triple options like YES / NO / NONE?

Question

I'm designing a user opinion page where the user has three choices. For instance, if the question is "Is it suitable?" the three options could be "YES", "NO", or "NoIdea".

In this case, what control should I use?

If there aren't any native controls available, are there any angular-ui or jquery-ui plugins available for the control?

Answer 1

To select one option of a limited number of choices, Radio Button Inputs would be the way to go.

Answer 2

I agree with the other answers, radio buttons are the best choice for an input with 3 choices. According to GNOME developer, they are preferable for your problem because:

Radio buttons are used in groups to select from a mutually exclusive set of options.

https://developer.gnome.org/hig/stable/radio-buttons.html.en

Radio buttons or a list will often be preferable to a drop-down list, as they present all the available options at once without any further interaction.

https://developer.gnome.org/hig/stable/drop-down-lists.html.en

---

Unfortunately, the default style of radio buttons is boring, but the .btn-group class from Bootstrap can help you to improve the style of your radio buttons:

(or)

JSFiddle demos :

• no default value
• No Idea selected
• No Idea selected and colors (but it's hard to see which one is selected)

The downside is that it requires jQuery, Bootstrap CSS and JS (see the External Resources tab on these JSFiddle links for the CDN URLs).

Here is the HTML code:

<div class="btn-group" data-toggle="buttons">
    <label data-value="yes" class="control-label btn btn-default" for="button_1">
        <input id="button_1" name="opinion" required="required" value="yes" checked="checked" type="radio"/>
        YES
    </label>
    <label data-value="no" class="control-label btn btn-default" for="button_0">
        <input id="button_0" name="opinion" required="required" value="no" type="radio"/>
        NO
    </label>
    <label data-value="no_idea" class="control-label btn btn-default" for="button_void">
        <input id="button_0" name="opinion" required="required" value="no_idea" type="radio" />
        No Idea
    </label>
</div>

Answer 3

Generally, there are just two natural ways to set up a 1-out-of-many choice in HTML: a set of radio buttons, and a select element. The latter can be used with a size attribute specifying the number of options visible in the initial size, or with size defaulted to 1. For usabaility, it is best to have all options visible initially, so that the user can just select the right one, instead of first opening a menu. This is best done with radio buttons, because that’s the usual way and users are accustomed to it, instead of the listbox created by <select size=3 ...>. But sometimes you need to save space and must use a select element with size defaulted.

Normally you should not set any of the options as initially selected, since the case where the user does not answer at all could (and maybe should) be processed as differently from a “No idea” answer. Lack of any answer could be an oversight (the user missed the question).

Answer 4

I generally favor radio buttons but -- as an option to experiment and test with -- you can use a slider. EXAMPLE:

   YES
    _
    :
    :
    ▲
NO OPINION 
    ▼
    :
    :
    _
   NO

Be careful to factor in up/down and left/right prejudices/tendencies in your testing. Up tends to be "good" and down "bad". And left-right is inextricably intertwined in politics and political philosophy.

Answer 5

Using a select element makes the screen easier to read, especially when your page contains only a few Yes, rarely No, and most of None. The real problem I am trying to solve was selecting Yes with one click and keeping the advantage of the dropdown menu.

Here is my potential solution - the icon is added to rotate the selected value of the dropdown:

Please let me know if you would like me to create a jQuery plugin from my code to try this idea.

Answer 6

As per your use case, radio button works best in this case. You can either place all the options in one line or one below the other. Hope this solves the problem.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 7

For ASP.Net applications I created a "User Control" with a set of Radio Buttons for Yes, No, NA (not applicable) and Null. The Null entry is the default selection and is usually not visible. This control can be connected to a database column which allows Null and holds 'tiny' integer values of 1, 0, and -1 respectively.

I call this the YNNA control and it can be styled with CSS however you wish. I provided a way to drop off one of the options, and also a way to rename the options. It is very convenient. I have some forms with dozens of these. I also added a way to double-click one to reset the selection to Null (which is not visible) to un-choose if necessary. This takes a bit of JavaScript.

Answer 8

An update to @A.L's answer

This is the Bootstrap 5 version of using input radio buttons in a button group.

Bootstrap 5 Input Radios as buttons

jQuery is no longer a dependency. No CSS required. It's all built in with utility classes.

Filter Refunds No filter

      <input id="refund_only_refunds" name="refund_filter" class="btn-check" type="radio" value="only refunds">
      <label class="btn btn-outline-primary" for="refund_only_refunds">Only Show Refunds</label>
      
      <input id="refund_only_nonrefunds" name="refund_filter" class="btn-check" type="radio" value="only non-refunds">
      <label class="btn btn-outline-primary" for="refund_only_nonrefunds">Don't Show Refunds</label>
    </div>

  </fieldset>
  
</div>
<div class="col-12">
  
  <button type="button" id="get_value" class="btn btn-outline-primary">Get value</button>
  
  </form>
</div>