When used as a verb, toggle means to switch back and forth between two different options or states—the way you might toggle between screens during a video chat with your friends. It can also refer to a fastener that uses a pin or rod passing transversely through an eye or loop in a rope, to bind it temporarily, as in a fishing toggle.

The word can be found in many UIs: software and hardware, including the Caps Lock and Num Lock keys on your keyboard; toggles are common in options menus in most programs; you can toggle the brightness on your phone; you can toggle the volume on a music player or podcast. When using toggles, designers should keep in mind the underlying meaning of the word, and how they can be confusing to users.

Toggle switches should always be clearly labeled to provide clear visibility of their current state. They should also be recognizable by their visual design, as they can be mistaken for sliders in some contexts. They should use high-contrast colors for their states to signal their difference from each other, and consider societal and cultural implications, as using the color red for an on position may be counterintuitive for some users.

Using toggles in article content is possible by using the Content Toggle Item element (ol> or ul>). This element allows you to transform standard ordered and unordered lists created in the article editor into interactive collapsible sections that can be expanded and collapsed on click. The element offers a variety of advanced options for positioning, responsiveness, animation and delay.

When it comes to accessibility, you should only use toggles where a user needs to update their preferences or settings. If the toggle is intended to have an immediate effect, you should consider using a button> with aria-pressed to make it accessible. If it has a more indeterminate state, you should use a checkbox instead. Check out Adrian Roselli’s helpful decision tree for when to choose a toggle or a checkbox in his blog post on the subject.