Toggle is a simple design element that can have a profound effect on user experience. When used consistently, toggles make it easy to update preferences or settings and can dramatically increase the ease with which users can complete tasks on your site or app.

In the context of Web design, a toggle is a switch that enforces a mutually exclusive state, such as on or off. Toggles are a preferable alternative to radio buttons, which are less responsive and require more clicks to perform the same function. Toggles can be more readable than other types of switches, including checkboxes. However, as with all types of Web design, toggles must be carefully implemented. When using them, it’s important to choose the right visual cues and provide clear labels so that users understand the current state of a toggle.

Color is an important visual cue for toggles, but designers should consider both a high contrast and cultural differences when selecting colors for the active and inactive states of a toggle. For example, red might be difficult for some users to interpret as on since they may associate it with stop signs or traffic signals. Similarly, choosing a light gray for the inactive state might be misinterpreted by users as passive or unengaged.

Toggles can be created in articles by using the Content Toggle Item advanced options (found under the gear icon in the left sidebar). When added to an article, toggles allow users to hide sections or items in a page. By default, toggles display an eye icon that indicates the item is hidden. Hovering over the toggle displays a popup that provides more information and an option to disable the toggle. Toggles are not intended to replace secrets or subscriber containers, which offer more flexibility for hiding content.