Toggle allows people to manage the state of a view or piece of content. This control is not the right choice for every situation, but it is a very effective tool when used correctly. It’s important to always evaluate the context before choosing a toggle and to consider whether another control, like a radio button or checkbox, would be better in that case.

A toggle switch has two opposing states, on and off, with a different appearance for each one. This makes it easy for users to tell what the current state of a toggle is, which helps prevent confusion. The switch must be labelled clearly to make it clear what will happen when the toggle is pressed. This is especially important for mobile platforms, where labels can be hard to read.

Toggles can also be used to manage feature flags. A feature can be toggled on or off for specific cohorts of users using the toggle button, and then at runtime the code path will take that cohort down one or the other. This is more efficient than changing a label or the call to action text.

A small toggle is often used in condensed spaces or embedded inside data table rows. This is particularly useful for managing large amounts of data as it lets people quickly change the display format without impacting the information itself. This is not a general purpose toggle however, and it’s best used as part of an experiment or for very short-lived features that don’t need to be dynamically re-configured (for example a Canary release). For more complex use cases this toggle configuration can be managed in source, though it will have less flexibility than other solutions such as the preprocessor’s #ifdef method.