Toggle () is a simple user interface element that allows users to update preferences, settings, and other types of information. This is achieved by providing clear direct labels and visual design that signals state change. Toggle switches should be used sparingly, as they can create confusion and be difficult to understand for users who are unfamiliar with the interaction model. When you do use them, make sure they are used consistently across your site and that the states they represent are clearly defined and communicated with visual indicators.
In software, toggles are similar to checkboxes, but with a more distinct on/off functionality. They are commonly seen in options menus and any other list of preference or setting items that can be turned on or off. This is also why using a toggle switch can often be more accessible than using a button> with the aria-pressed attribute.
Toggle is available in the Content Elements section of the left sidebar and can be accessed by clicking the toggle icon or the blue “Advanced Options” button. The advanced options allow you to adjust several properties of the toggle including Positioning, Responsive and Animation & Delay.
Toggle is a flexible and powerful tool that will help you quickly and easily transform standard ordered (ol>) and unordered lists (ul>) created in the article editor into interactive collapsible and expandable sections. You can use any markup in your toggles and they will automatically inherit the article formatting styles.