A toggle is a way to turn something on and off. It may be a setting, a view, or even content. Toggles are especially useful when a team wants to perform a controlled rollout of a new feature. For example, Facebook uses toggles extensively to test changes in a controlled manner before they are rolled out to everyone. Toggles are also frequently used in responsive web design to change the visibility of navigation menus or sidebars based on screen size.
Toggles should be clearly labeled to communicate what they affect. They should also be easy to use, responding reliably to user input. Finally, toggles should be made accessible to users with differing abilities, including those who utilize assistive technologies.
A simple way to implement a toggle is to use a text component containing the toggle’s state (either on or off) and a container that contains the content to be revealed when the toggle is activated. The content that is displayed should be placed below the trigger and be assigned a CSS class name of toggleContent. ToggleContent should be given a corresponding toggleState attribute that is set to the appropriate value.
As a general rule, toggles should not stay in place for long periods of time. A transitional toggling decision like a Release Toggle should only be around for a week or two at most. For long-lived toggles, such as a Permission Toggle, it is best to move the configuration into some sort of centralized system that allows for dynamic re-configuration without having to deploy new code. This can be as simple as commenting in the configuration file or as complex as building a UI into your management platform.
