3

I have seen multiple applications going for safe usage of checkboxes while there is a multi-select scenario of options shown in list or under one category.

What is the rationale of having checkboxes while toggles can also do the same work. Can we use toggles instead of checkboxes?

1

1 Answer 1

4

Let us look at the definition of the

In my opinion

A checkbox control has three states: unselected, selected, and indeterminate. The last state represents a situation where a list of sub-options is grouped under a parent option and sub-options are in both selected and unselected states.

and

The toggle represents a physical switch that allows users to turn things on or off, like a light switch.

Below are few use-cases along with guidelines to decide between these two controls while designing form experience.

Case 1: Instant response Use Toggle switch when,

  • An instant response of applied settings is required without an explicit action.
  • A setting requires an on/off or show/hide function to display the results.
  • User needs to perform instantaneous actions that do not need a review or confirmation.

Case 2: Settings confirmation Use Checkbox when,

  • Applied settings need to be confirmed and reviewed by user before they are submitted.
  • Defined settings require an action like Submit, OK, Next, Apply before displaying results.
  • User has to perform additional steps for changes to become effective.

Case 3: Multiple choices

  • Multiple options are available and user has to select one or more options from them.
  • Clicking multiple toggle switches one by one and waiting to see results after each click takes extra time.

Case 4: Indeterminate state Use Checkbox when,

  • An intermediate selection state is required when multiple sub-options are grouped under a parent option. The intermediate state will represent that multiple sub-options (but not all of them) are selected in the list.

Case 5: Clear visual state Use Checkbox when,

  • There is a chance of getting confused with on/off state of a toggle switch. Sometimes it gets difficult to understand whether the switch is showing state or action.
  • A clear selected or unselected state needs to provide.

Case 6: Related items Use Checkbox when,

  • User has to select option(s) from a list of related items.

Case 7: Single option Use Checkbox when, A single binary yes/no choice is provided. Only one option can be selected or deselected and its meaning is obvious.

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