Uncategorised

A Look at the Toggle Element in Storybook

Toggle is a word that describes two states (on or off) and can be applied to hardware, software, and even verbs like “to toggle between screens as you video chat with two friends at once.” This week we’re taking a look at the Toggle element in Storybook and exploring some of the functionality it offers.

Toggles are a common control used in many modern interfaces and can be thought of as glorified checkboxes. They provide the ability for users to flip a binary action between two states and are often found in options menus where the user can choose one of several actions, such as “show desktop” or “hide sent messages.”

While it is possible to use a toggle in any context that calls for an on/off choice, some examples of specific uses are highlighted below.

The first and most obvious application of a toggle is found in hardware. For example, the Caps Lock and Num Lock keys on a keyboard are both toggles that allow you to turn functions on and off. Toggles are also commonly used in software in places where you would find a list of options or preferences, such as the ones found in most applications. All of these toggles are designed to let the user make a binary choice between two options.

A more complex example of a toggle is the Experiment Toggle which is used to perform multivariate or A/B testing. With an experiment toggle in place the system will consistently send a given user down one codepath or the other, and by tracking the aggregate behavior of different cohorts you can determine which path is best for your users. Creating and maintaining a toggle for each cohort is labor intensive, but this type of testing is highly effective and can be extremely profitable.

The ability to toggle a configuration at runtime can be very powerful but is dangerous in a production environment if not managed properly. If a toggle isn’t configured correctly it could fail the test that runs on it, or even worse – cause the entire system to crash. This is why most teams opt for a more dynamic approach and move their toggle configuration into some sort of centralized storage, often an existing application DB. This is usually accompanied by the build-out of some form of admin UI which allows product managers, testers and systems operators to view and modify the feature flags that are running in their environment. This helps to ensure that only the most productive features are active at any given time and that any unnecessary ones are removed.