A toggle is a small switch that can be either on or off. It’s commonly used in electronic devices to control functions such as a volume control. It’s also a design pattern that is often used on websites and apps to allow users to update settings or preferences, or change an existing state. Toggles are easy to understand, deliver immediate results and can be positioned where they are most needed on the page.
When designing a Toggle it is important to keep the following design guidelines in mind:
Use high-contrast colors for states to provide clear visibility of the toggle’s status. This is especially important for accessibility needs. Consider societal and cultural differences when selecting the color for an on or off state. For example, red for an on or off status can have different meanings for some people who may associate it with stop lights and traffic signals.
Toggle should always be clearly labeled and offer a direct effect when clicked. This can be achieved through the use of a standard icon with a clear on or off state, or by using an action text with a clear description. Alternatively, a toggle may be a form element with a hidden input that triggers an event when checked or unchecked.
Whenever possible it is preferable to avoid the use of hardcoded toggle configuration and instead rely on the flexibility provided by a system of Feature Toggles. Savvy teams view the inventory of Feature Toggles as carrying a carrying cost and try to minimize that load by removing toggles as soon as they are no longer required. To this end many teams create an automated process for adding a task to the backlog when a Toggle is deprecated. Others even go as far as creating “expiration dates” on their toggles which will cause them to fail a test (or sometimes even refuse to start an application!) once they reach the pre-determined end of life.
There are many ways to manage the configuration of Toggles, ranging from very simple approaches that don’t allow for dynamic re-configuration through to highly sophisticated systems that require the creation of new code to be deployed on the website. Regardless of the approach, it is crucial to always have an auditing system in place which can quickly identify any toggle that is no longer being used and remove it from the application.
The term toggle comes from the Latin word toglegere, which means “to shift or turn.” The verb toggling can be traced all the way back to the 14th century and has since been used to describe changing between two positions—as in, to shift from one state to another, such as the act of toggling a cord lock or drawstring.
The MatButtonToggle component uses native button elements and the aria-pressed attribute to convey toggle state. However, when designing the surrounding layout it is important to use other methods for conveying the association between a toggle and its corresponding action—such as the aria-labelledby attribute or the
