Toggle is an easy-to-use user interface component that allows users to update preferences, settings and other types of information. The word toggle is often associated with a physical switch that has two states, on and off, which makes sense because the original meaning of the word toggle was “pin passed through an eye or loop in a rope to secure it temporarily” (from Webster’s New World College Dictionary). However, in more modern times, toggle also refers to any kind of software or hardware switching that alternates between two positions like the caps lock or num lock keys on a keyboard or an air traffic control panel.

When using toggles, make sure to clearly communicate what state the control is currently in. This can be done with clear labels and by using standard visual design cues such as movement and color. Toggles are especially useful when a user needs to make a decision between opposing options, such as whether or not to enable Airplane Mode during an airplane flight.

When possible, it’s best to use toggles for options that require immediate results as opposed to long forms where the user may need to click a Save or Confirm button to apply their changes. If this is not possible, it’s better to use a checkbox rather than a toggle. Ideally, toggles should look similar to sliders in terms of visual appearance and functionality, and be used only for settings or options that are based on a binary choice: ON or OFF.