A toggle is a switch that has two positions, usually ON and OFF. It’s the preferred control when you want to change system settings or preferences, and it takes up less screen estate than a checkbox. Toggles are a good choice when you need to allow users to make a binary decision, such as whether or not to enable Airplane Mode. Toggle switches are also often used for experimentation (multivariate or A/B testing) since they let you send different users down the same codepath but with different default values.
The word toggle comes from the 18th century term for a pin passed through an eye or loop in a rope to temporarily fasten it. A modern usage refers to a fastener with two positions, like the one on your laptop that locks or unlocks the caps lock. It can also be a feature flag that allows you to change the state of a software feature.
Feature Toggles are generally short lived compared to other categories of feature flags, although it may be necessary to leave a toggle in place for longer periods of time for product-centric reasons. When a toggle is left in place for a prolonged period of time it may be referred to as a Champagne Brunch or Canary Release Toggle.
For long-lived toggles it is important to clearly explain what happens when the switch is pressed in each of its states. This can be achieved by providing clear labels on the switch itself. For example, on a toggle switch that enables or disables cookies the label should be clear and unambiguous: “Cookies ON” or “Cookies OFF”. A toggle that looks like a slider and utilizes visual cues to indicate its current state can be even more helpful in preventing confusion.
When designing a toggle switch it is important to choose a meaningful color to represent each of its states. For example, a green toggle should be clearly identified as ON and a red toggle should be clearly identified as OFF. It’s also useful to use consistent visual design to avoid creating any visual confusion, such as using a red-on-blue color scheme or an icon with the same shape for both On and Off.
Toggle switches should be positioned near each other so that users can quickly see which is currently active. They should be clearly marked and should be differentiated from other controls on the page. In the example below, the toggle on the far right is On.
Savvy teams view the feature toggles in their codebase as inventory that comes with a carrying cost and seek to keep this inventory as low as possible. To help with this they may include a task on the backlog to remove toggles from production when they are no longer needed or put “expiration dates” on toggles that will fail a test (or potentially prevent a deployment) if they are still in place past their expiration date. Some teams even go as far as to use a special comment or preprocessor feature in order to manage toggle configuration.
