A toggle is a switch or a control that allows the user to change the state of an object (or, more broadly, of an experience). It can be either on or off. Often, toggles have an icon associated with them to help people identify them visually. Toggles are also used in software and hardware: For example, the Caps Lock and Num Lock keys are toggle switches that switch between an on and off state.
Toggles can be grouped together in various ways to support different use cases. Generally, a feature toggle is classified by its type, and then each type is given its own configurable options. This provides a more structured approach than simply hard-coding a toggle configuration.
When configured properly, toggles are a great way to add a degree of customization and flexibility to your website without breaking the existing structure of your page. However, when implemented incorrectly, toggles can cause more harm than good. There are a number of things to keep in mind when designing and using toggles in order to avoid introducing confusion or annoyance for your users.
The word toggle was first recorded in the 18th century, referring to a pin passed transversely through an eye or loop in a rope or chain so as to bind it temporarily to another chain or rope similarly treated. It later came to mean a fastener that can be turned on or off, such as the sort of switch on an electric light. Toggle is now commonly used in computer technology to describe a binary action, like the on/off switch on a keyboard key or a light switch.
The most important aspect of an effective toggle button is its label. The label should be short and direct and describe what will happen if the toggle is in the ON state. It should not contain more than three words, and nouns are preferred.
A toggle must also have clear action text to further clarify its function and what state it is currently in. The toggle should have an open or closed icon to indicate whether the switch is ON or OFF. Default toggles are larger in size than small toggles and appear in forms or within full pages of information, while small toggles are often used in condensed spaces inline with other components and content.
Carbon bakes accessibility considerations into its toggles, making them usable for people who may operate through the keyboard alone. For more detailed guidelines on creating accessible toggles, please refer to our accessibility guide.
