Toggle is a feature flag that allows you to switch features on and off or between different states without having to commit code changes. This allows you to support agile development processes and shortens the QA process, since you would usually have to commit these new features on a separate branch of your codebase under more traditional waterfall models.

When using toggles, it’s important to make sure the toggle is clearly labelled with the setting or view that it controls. It’s also a good idea to give it an icon that communicates the state of the toggle, so that users can quickly see what it does. Finally, you’ll need to choose a color scheme that makes it clear to users whether the toggle is activated or deactivated.

For example, in our article template code, we pair details> and summary> to create a toggle that hides or shows the content of an article. By default the content is hidden, but by clicking the toggle button you can make it visible.

Another common use for toggles is to perform multivariate or A/B testing. By creating an experiment toggle, you can assign a cohort of users to one codepath and then see how the results compare to other cohorts. You can then remove the experiment toggle and move all of your users to the better performing path.