• Light
  • Dark
  • Night vision
English

Language

Palette

  • Light
  • Dark
  • Night vision

Toggle switch

1 minute435 views

Toggle switch is similar to checkbox — it is used to toggle on or off some item, typically property or state of the system.

Difference between toggle and checkboxes

In many cases toggles and checkboxes are used interchangeably, and it may lead to inconsistency across UIs of the system. But toggles are ancestors of physical toggles, and checkboxes are ancestors of paper forms, that are filled by pen, so they are not totally equal semantically.

While there is no single approach, I prefer the following heuristics:

  • Toggles change the state immediately, what makes them closer to original physical controls. Checkboxes are used more inside forms and other UIs, that require confirmation
  • Because of increased area, toggles are more for touch screen UIs, while checkboxes are more for traditional keyboard-mouse user interfaces.
  • Because of paper origin, checkboxes are closer to availability of the object, while toggles are closer to activeness of the state. So, it is better not ot use the toggles for selection of options.
  • Also, users don’t expect intermediate state of the toggle.

See also