A toggle is a switch that can be turned on or off, switching between two states or modes. In everyday technology, toggles can be found in devices that enable or disable WiFi and Bluetooth(r) or software applications that use them to switch between different display modes or settings.

The most important thing to remember when designing a toggle is that it should be clear which way it flips and it should stick to a convention of toggle semantics where existing or legacy behavior is enabled when the toggle is Off and new or future behavior is enabled when the toggle is On. For example, a common pattern is to use a dark background color for the On position and light background colors for the Off position to make it easier to distinguish between the two states.

Feature toggles are an important tool for dev teams as they write and test new features in the backend. Toggle configurations are often stored side-by-side with release code, making it easy to test how the release will perform with all of the toggles flipped Off and with just one or more of them flipped On.

For content creators, toggles are a great way to hide parts of articles at a moment’s notice without changing the article itself. Toggle content items transform standard ordered (ol>) and unordered lists (ul>) created in the article editor into interactive expandable or collapsible sections that can be expanded or hidden with a click. Toggle content items can also be made responsive and animated with advanced options similar to those available for the overall element.