What Is a Togle?

A toggle is a pin passed through the eye of a rope to fasten it. It’s also a software or hardware feature that is switched ON and OFF. The toggle switch on a keyboard is an example of this, as well as the option menus in many applications.

Toggles are often favored over radio buttons or checkboxes because they don’t rely on the proximity principle to communicate state (and because they take up less screen space). However, they can be confusing for users if their current state isn’t obvious. This is why it’s important to always use contextually meaningful labels and a visual cue to explain what each toggle switch currently does.

Another common application for toggles is to perform multivariate or A/B testing. By tracking the aggregate behavior of different cohorts of users we can consistently send a subset of users down one code path or the other, making data-driven optimizations to things like the purchase flow in an ecommerce system, or the Call To Action wording on a button.

While this can be a useful feature it’s not ideal for all situations, especially because toggle switches can be inaccessible to screen readers and other assistive technologies. Instead, it might be better to use a button with the aria-pressed attribute and make sure its label makes it clear what will happen when clicked. For more guidance on accessible toggles see this article by Kitty Giraudel.