Managing Flag Debt


Toggle is a control that lets people manage the state of content or a view, typically using an interface icon that communicates its function and a different appearance for each state. The toggle is most useful when a setting can be either on or off (eg, playing music during a video chat with two friends at once) or when a user must confirm that they have read a legal disclaimer (eg, clicking “I agree”).

The uk-toggle> component provides the necessary WAI-ARIA roles, states and properties to implement the Toggle design pattern in your application. In addition to providing the aria-expanded attribute, the toggle automatically updates its appearance when the state changes. Toggle switches are commonly shaped like sliders to create an intuitive analogy with the real-world item they represent, and they use clear labels that describe what will happen when the switch is turned on or off.

Managing flag debt

Feature flags are inventory which comes with a carrying cost, and it’s important to keep this stock at a minimum. Savvy teams have a process in place for proactively removing toggles that they no longer need. This ranges from simple commenting approaches that rely on the preprocessor’s #ifdef feature to more sophisticated ‘expiration date’ settings that cause the application to fail to start if a toggle is still in use after its expiration date.

Many teams also perform regression tests on the configuration of a toggle that is expected to go live in production, including ensuring that any existing or legacy behavior that will be enabled by the toggle’s On state is tested, as well as any new or future behavior that will be enabled by its Off state. Additionally, some teams perform tests with all toggles flipped On, to ensure that no unexpected regressions are introduced by a change in the status quo.