What is a Toggle?

A toggle is a control that can be in one of two states: ON or OFF. Unlike a radio button which has to be clicked and then re-clicked to apply changes, toggles allow the user to change the state immediately without needing to save or confirm their choice. This makes them well suited to controlling system settings and preferences (e.g. Airplane Mode) and they are the preferred control type on mobile devices compared to two radio buttons.

The word toggle can also be used as a verb to mean to switch or alternate between two functions, for example when someone video chats with two friends at once and switches between the screens. It is also possible to toggle between the different camera feeds on a drone to see what each has captured at the moment.

When using a toggle on an existing screen or feature, it is important that it be well labeled to make the user experience clear and intuitive. The toggle should be easily identifiable and it is recommended that the label describes what the toggle will do when in its ON state.

Toggle configuration can be managed in a variety of ways, ranging from static files that can be modified by hand through to more dynamic approaches such as the use of a preprocessor’s #ifdef feature. In most cases it is preferable for the toggle configuration to live side-by-side with the code that implements the feature, making it easy to roll out a new version that re-configures the toggle.