A toggle is a switch that can be in either an on or off position. It enforces a mutually exclusive state, unlike radio buttons that allow users to select more than one option.
Toggles are used when you want to control the default state of a feature flag. For example, you might use a toggle to control whether a feature is turned on or off for new users (i.e., the toggle is set to off by default). It’s also the preferred control for mobile settings that take up less screen space than two radio buttons.
When using a toggle, you should use clear label text for the action and an optional description of the setting. The labels should always be centered so that they are easily readable. You should also avoid using color alone to signal a toggle’s state. This is in line with WCAG’s recommendation to not solely use color for conveying meaning. It’s also important to consider societal and cultural implications when choosing a color for your toggles, such as red vs. green or gray.
Toggle configuration is best managed via a dynamic approach, such as a centralized config store, rather than static files. Managing toggle configuration via files can become cumbersome at scale and it’s difficult to track change across multiple sites or fleets of servers. For this reason, most organizations will move their Toggle Configuration into some type of centralized config storage, which is often an existing application database.
