A toggle is a form of on-off control that allows users to switch between two different options. For example, the Caps Lock and Num Lock keys on a keyboard serve as toggles for their respective functions; pressing one turns the function on, while pressing it again will turn it off. The toggle concept is also used in software, and you can see examples of them when you look at the options menus found on most websites.

A well-designed toggle should clearly communicate its state through visual cues, such as color and movement. It should also be easily distinguishable from its surrounding context and ideally have a clear label that indicates what setting, view, or content it affects. In order to reduce confusion, designers should avoid inverting toggles and instead use high contrast colors and consider societal and cultural context when choosing the color for a toggle.

Savvy teams treat toggles as inventory which comes with a carrying cost and seek to keep this inventory low. Some teams will add a task to their backlog for each new toggle that they deploy while others will put “expiration dates” on their toggles so that the system will fail to start if the toggle is still active after an expiration date has passed.

Toggles are ideal for settings and preferences that can be turned ON or OFF. They take up less space than a radio button, and are easier to interact with using the keyboard (compared to checking or unchecking a box). Carbon bakes accessibility into its components, making it easy for teams to add accessibility annotations to their toggles without much additional work.