7

Both Radio button and Switch button does the same job - Selecting one option at a time. Is there any other way for choosing between the two given options other than Radio/switch buttons?

In my case, the list of options will display only after selecting either of the given choices. So i dont want to use Radio button. Currently I have a switch button. Please suggest me an alternative. Thanks

enter image description here

Improve this question
4
  • 1
    Are the list of options displayed when selecting Opt1/Opt2 different or reordered?
    – Alvaro
    Dec 23, 2016 at 10:59
  • Options are same, but its value differs. For example, if the Opt1 and opt2 are currencies, the value will be calculated based on either USD or Euro are selected.
    – Hemalatha
    Dec 23, 2016 at 12:43
  • 1
    Any specific reason it needs to be at the top? Seems like "Currency" can simply be asked right after "DOB" and you can confidently use a Radio button, switch, or dropdown menu...but that's just my opinion based on very minimal knowledge of your project.
    – MonkeyZeus
    Dec 23, 2016 at 14:18
  • The currency, acts as the primary action. If there is a field called amount to pay, based on the currency, the amount will convert to either dollars or euro etc.
    – Hemalatha
    Dec 26, 2016 at 6:22

5 Answers 5

Reset to default
8

Toggle switches or radio buttons are both good choices for this use case. Unambiguous, familiar, effective. Good job!

Option 1/2 rendered as a toggle switch Option 1/2 rendered as radios

Of course you can set the radio buttons to default to option 1, so that there is always one selected.

I would avoid using buttons with active/inactive states, as when you have only two options it becomes ambiguous which of the two is selected, You see this a lot (particularly in DVD menus, amiright?) and it's not helpful:

Two options rendered as buttons - avoid!

Hope that helps :)

Improve this answer
3
  • 2
    Radio buttons and toggle switches aren't the same, usability-speaking. A toggle switch implies that an action will take effect immediately (e.g. Wi-Fi being enabled), whereas radio buttons do not. The other answer from Alvaro shows how you could use another form of toggle that doesn't afford this.
    – Dan
    Feb 19, 2018 at 10:38
  • As (almost) completely inexperienced person/ Are radio button still a thing? Isn't the clickable area in a radio button way too small?
    – famargar
    May 14, 2021 at 13:13
  • Hello! I'm pretty sure radios are still a thing, if you want them! It's pretty standard to make the text part of the clickable area by wrapping the input in a label.
    – cheersphilip
    May 17, 2021 at 8:25
9

Radio buttons and switch button don't do the same thing. Radio buttons let you choose only one option in a set, and a switch lets you turn an option on or off.

As an alternative to Radio button in your case you could use a toggle button with exclusive selection. However, it is only recommended when there are 3 or more options to toggle:

Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.

enter image description here

Toggle button requirements:

  • Have at least three toggle buttons in a group
  • Label buttons with text, an icon, or both

It looks like you are using those Option1/Option2 as Tabs. Be careful with that. As another alternative you could make use of a dropdown.

enter image description here

Material design - Buttons

Improve this answer
1

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others

https://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2679-what-are-the-differences-between-select-drop-downs-radio-buttons-and-checkboxes.html

enter image description here

Improve this answer
1
  • I want only one answer. But i dont want radio buttons to pop in the center of the screen. So i need an alternative.
    – Hemalatha
    Dec 23, 2016 at 10:56
1

If you only have a small set of choices and one is always defaulted, then you can swap in tabs or a tab bar for radio buttons. They all work for providing a list of mutually exclusive options.

With tabs in particular there is a visually obvious association between the item selected, and the sub options it contains.

Improve this answer
1
  • sub options are same for both the choices
    – Hemalatha
    Dec 28, 2016 at 10:08
0

I don't think the solution to this has been fully hashed out. A little bit of graphic animation can solve the ambiguity of the "Button" approach by having a box that highlights the section the user selected, but slides to that selection so the user can intuitively pick up on the fact that that box will only highlight one option.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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