Toggle is a user interface element that allows users to quickly change between two different options. Toggles are a form of binary control and can be used to modify system settings, preferences, or functionality (like turning off airplane mode in a video chat). Toggles are commonly found in mobile applications where screen space is limited. They also are a common element in software programs and computer settings to control function features and preferences.
When using toggles it’s important to provide clear labels for the current state. This helps to prevent confusion and ensure that the user understands what they’re adjusting. It’s also important to limit the number of words in the label to ensure clarity. Too many words can cause the user to become overwhelmed and frustrated when trying to determine which state they’re in.
Toggles are a great solution for settings and preferences that need immediate effect, and they are a better choice than radio buttons or checkboxes in cases where the new state has a default value. However, they should not be applied to settings that require a Save or Confirm button or in situations where the toggle can have an indeterminate state.
Managing the configuration of toggles is critical when they start to scale. The use of static files to manage toggles becomes cumbersome at a certain size, and modifying them consistently across the codebase can be a challenge. This is why most sites implement some type of centralized storage for toggle configuration, often in an existing application DB or existing API. This usually comes with a built out admin UI that allows for a consistent and repeatable process to change toggle states.
In addition to storing the configuration of a toggle, the feature flag can be set to automatically revert back to the previous state after every change. This allows us to test changes without having to re-deploy the code and ensure that our builds are always deploying in a known state.
The feature flag is available as a standard UI element in the Content Editor and has a cog icon menu that provides access to its advanced options. These options allow you to adjust the positioning, Responsive, Animation & Delay, and other overall element options.
Toggles are a great way to hide article sections and items from viewers, but they do not provide the flexibility of secrets or subscriber containers. For example, it is not possible to hide article vignettes, prompt linked articles, or key/value items with the toggles. Additionally, there is a limit on how many article sections or items can be toggled at once. If you have too many toggles enabled, it can slow down the loading of an article and potentially confuse the viewer. For this reason, it’s best to keep toggles to a minimum and only enable them for the most essential elements.
