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.