Toggle switch

Toggle switch or toggle or switch is the user interface control, that is similar by role and behavior to physical toggle switch — it allows to switch on or off some functionality.

Typically switch is displayed as a horizontal rounded rectangle with a handle (a circle or another rectangle), that is positioned inside or above it.

The left position of the handle corresponds to Off state, and the handle is typically gray or red. The right position of the handle corresponds to On state, and the handle is green or blue in most cases.

Typical issues

Difference between checkbox and switch

The toggle switch is quite new control for user interfaces — it became popular in modern touch screen mobile devices. Before toggles, checkboxes were used for similar functionality. This results in a typical problem — the difference between checkboxes and switches is not so obvious, and sometimes the selection of control is wrong.

Generally, the difference between switch and checkbox is the difference between functionalities and states or properties of the system. The switch is used to make some functionality active or inactive (like Wifi hotspot), while checkboxes are used to define some states or properties of some object, like color, size or status.

Other differences:

  • Toggle switch doesn’t have an indeterminate state.
  • Toggle switch typically gives an instantaneous effect to functionality, while checkbox selection is not affecting the system until the user confirms it with separate action, like pressing the “Apply” button.

Further reading