What's the difference between a toggle switch, radio buttons and a tickbox? What's the best cases these patterns can be used?

Question

What's the best cases these patterns can be use?

Answer 1

Well, it kind of depends on which system you are.
There are mobile guidelines for Android, iOS and Windows.

iOS, for example, doesn't use regular checkboxes (they are not called tickbox btw) or radio buttons but only grouped lists of elements (scroll down to "table view") or switches.

But from what I've learned, you use all of those controls like this:

---

Radio Buttons

• For mutually exclusive options, but not for binary choices
• If there are too many options (on Windows the number is 8) use a drop-down instead

---

Checkboxes

• For selecting a binary option or multiple options in a set
• Should always be used with positive commands, not negative like "do not .."

---

Switches

• Are also used for binary options, but usually those that activate/deactivate something, like you would expect from a switch in real life

• It is a good user experience to immediately change the affected setting by the switch and not only after pressing "save" or returning to the previous screen.
  Because we have this expectation for a switch in real life (for example we know light immediately turns on)

Answer 2

The toggle switch general use is to start or stop something. Like Wi-Fi or Bluetooth access. It has the analogy of a light switch.

The radio button is used in a group of several other radio buttons where only one at a time can be selected. When selecting one, all other are deselected.

The tick box (or check box) can be used in groups of several other tick boxes, but have no dependency with others. Selecting one doesn’t affect any other tick box. Checked represents true, un-checked represent false.

Answer 3

Toggle - Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for example) is the current state, or the action.

Radio button - let users select one option from two or more choices. Each option is represented by one radio button; a user can select only one radio button in a radio button group.

Checkbox - There are various ways to improve the usability of such switches, and one has to remember that these are both fairly popular and only require a few learning iterations before most users get it. But from a cognition perspective a checkbox is far easier (and faster) to interpret compared to a toggle switch.

--------------------- Toggle example ---------------------

--------------------- Radio button example ---------------------

--------------------- Checkbox example ---------------------

At end if upto your context of utilising them, i.e., in what way you want them to be presented to user. For instance, toggle is default considered for on/off scenario but you could use it for camera selection with front or rear.

Reference URL -

Radio buttons or Toggle switch for one out of two options?

https://msdn.microsoft.com/en-us/library/windows/apps/hh465475.aspx

https://msdn.microsoft.com/en-us/library/windows/apps/hh700395.aspx

Toggle button vs. check box and toggle switch

Note - Do check above reference link for more clarity and understanding.

Answer 4

This selection control flowchart has suggestions on which control to use according to use cases. Might be a quick resource if decision trees are useful for you and your team.