A toggle is a switch with two positions: on or off. You might use it to alternate between screens as you video chat with two people at the same time, or to turn on and off your favorite radio station in your car. It’s also a user interface control that allows users to update preferences, settings, or other information. Toggle switches provide direct labels and standard visual design, so they’re easy for users to understand. They can also help with accessibility, but only if they are used correctly.
The best toggles are clear and descriptive. The toggle label should describe what the switch will do and not rely on color to convey its state. For example, a toggle to download files must be clear that the download will end when it is turned off. Designers often add red or green colors to their toggles to clarify the current state, but that is in conflict with WCAG guidelines and can confuse users.
It’s important to keep the number of toggles low and have a process for pruning old ones when they are no longer needed. Otherwise, they can become a liability and slow down your codebase. You might manage this by adding toggle cleanup tasks to your team’s backlog, or you might integrate the process into your feature management software. In either case, it’s important to make sure that any toggle that isn’t currently active is removed from the codebase, rather than left to degrade over time.
