Forms provide several controls that make it easier to collect input from users. Using the right control at right place is a challenge while designing forms.

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.

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

Switch VS Checkbox in User Interface Design
Switch VS Checkbox in User Interface Design

Tapping a toggle switch is a two-step action: selection and execution, whereas checkbox is just selection of an option and its execution usually requires another control.

When deciding between a checkbox and toggle switch control, it is better to focus on the usage context instead of their function.

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.
The options that require instant response are best selected using a toggle switch.
The options that require instant response are best selected using a toggle switch.

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.
Checkboxes are preferred when an explicit action is required to apply settings.
Checkboxes are preferred when an explicit action is required to apply settings.

Case 3: Multiple choices

Use Checkbox when,

  • 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.
Selecting multiple options in a list provides better experience using checkboxes.
Selecting multiple options in a list provides better experience using checkboxes.

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.
Indeterminate state is best shown using a checkbox.
Indeterminate state is best shown using a checkbox.

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.
Sometimes toggle switch does not clearly indicate whether it is a state or action.
Sometimes toggle switch does not clearly indicate whether it is a state or action.

Case 6: Related items

Use Checkbox when,

  • User has to selected option(s) from a list of related items.
To select related items in a list, use checkboxes.
To select related items in a list, use checkboxes.

Use Toggle switch when,

  • User is toggling independent features or behaviors.
Independent items use toggle switches for selection.
Independent items use toggle switches for selection.

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.
A single yes/no option is more usable with a checkbox.
A single yes/no option is more usable with a checkbox.

Use Toggle switch when,

  • A single selection is required and you want to offer two options for an on/off type of decision.
A single on/off decision is best understandable using a toggle switch.
A single on/off decision is best understandable using a toggle switch.

Conclusion

It is important to provide right control at right place in a form to make it more user-friendly. Since forms can be very long with large number of options, it becomes tedious for user if he has to make extra clicks to fill his information. The provided use-cases and guidelines will help you to decide between checkbox and toggle switch while adding controls to your forms.

References:

Thanks for reading. Find more related articles at uxdworld.com.

Get my free 5-day UX design course via email.

If you have any questions, contact me and I will write about it: Linkedin |Twitter | Facebook

Note: Thanks to Saadia for the contribution. Originally published on Medium