Toggle is a user-interface control that allows users to update preferences, settings, and other types of information. Toggles should be used sparingly and appropriately. They must be direct and clear, have a standardized visual design, and deliver immediate results.

Toggles should only be triggered by a specific action (e.g. clicking, pressing, or dragging). Toggles should never be used to display default values or other information that cannot change. They should also never be a substitute for radio buttons or checkboxes.

The first rule is about clarity: toggle switches should clearly state what will happen when pressed or checked. They should always use a clear label, and ideally, the labels should follow the toggle, not vice versa. This is consistent with the proximity principle, and it avoids confusion for users who may not be familiar with the toggle.

It is also best to avoid relying on color to convey meaning, especially for accessibility reasons. For example, red as on/off can be confusing for people who have red/green color blindness, and a green toggle switch is inaccessible to some users using screen readers and other assistive technologies.

Finally, be sure to have a process for vetting toggles before you deploy them. This ensures that toggles only get deployed when they are truly needed, and that old ones don’t hang around in code. This may be done through a dedicated task in a team’s backlog or built into your content management platform.