A toggle is a switch with two positions: on and off. It’s a user-interface element that allows you to change the state of something in your app or website by pressing it. Using toggles wisely is a great way to update preferences, settings, and other types of information. But if used incorrectly, it can create confusion and mislead users.
A great place to use toggles is when you need to show two different options for the same behavior and want to let the user choose between them. For example, if you have two different email templates, you can display one to some users and the other to others by using toggles. This approach lets you quickly test new features with real customers.
Another great use of toggles is in a product’s settings. When a user wants to change a setting but doesn’t have the time or resources to do it all at once, toggles provide a simple way for them to make a small change without having to restart the whole application.
In this scenario, it’s important to ensure that your toggle’s action text clearly states the outcome of tapping it. The wording should be binary so that it’s easy to understand: “on” or “off.” Toggle switches also need to be positioned vertically because horizontal ones are confusing for users to interpret.
Many teams also find it useful to add a label like “Toggles” below the toggles list to indicate which toggles are currently enabled and which are disabled. This helps teams keep track of which toggles are live in production and how often they’re being triggered. It’s also a good idea to perform some tests with all toggles flipped on so that you can avoid any surprises in a future release.
Lastly, a good practice for teams is to be proactive about removing toggles that are no longer needed. Savvy teams view the inventory of feature toggles as a carrying cost and seek to keep it low by adding a task to their backlogs whenever a toggle is flipped on and by putting “expiration dates” on some toggles so they’re automatically removed from production after a certain amount of time has passed.
Toggle Item Advanced Options
For more advanced settings for your toggle item, click the gear icon and select “Advanced options”. This will open a left sidebar where you can adjust positioning, responsiveness, animation & delay and other toggle item features.
