Toggle is a way to immediately change the state of something—to switch it from on to off, or vice versa. It’s used in almost every aspect of computing when a setting has two outcomes: on or off. In web design, toggles are often used in conjunction with form fields to allow visitors to easily select which options they want and need.

A toggle can be large or small and should always include clear label and action text that describe what it’s doing when it’s clicked. It should also be placed in a condensed space to ensure that it is visible and easily accessible. It’s important to keep in mind when designing a toggle that users with low vision or impairment may need to be provided with visual signifiers of state—like color and other visual cues—in addition to action text.

A toggle can also be used to control features of the site, for example when an experiment is running a toggle can be set to force users into one of two code paths—this helps us understand which path performs better without forcing a user’s device into that path at runtime. However, this is tricky to do with a real toggle configuration system because it requires redeploying the artifact into the testing environment and can impact the CI/CD cycle times that are required for validation and feedback.

Another use for a toggle is to hide article IDs in the Euclid editor, since those long code IDs can make the editor pretty messy to look at. This could be a per-textbox toggle, similar to the current “Spellcheck” toggle, or it could be page-wide, like the Edit Article toggle at the top of each article’s page that hides the editing icons.