A toggle is a switch that can be either on or off. It’s the type of switch you might find on a light fixture or in an airplane cockpit. You might also use the word to describe a quick way to alternate between two functions, like changing screen resolutions during a video chat.

When you click a toggle, it updates its appearance to show whether it’s on or off—a common visual cue that lets people know what state the control is in. It’s also important to make sure that the toggle’s label is clear about the state it’s in, so users understand which option it affects (e.g., cookies).

If you want to make your toggles more recognizable, consider using a different icon for each state (on or off). This will help users identify the current status of the toggle, making it easier to remember which one they clicked.

You can add toggles to your wireframes by adding them to a container. Toggles can also appear in a container with other types of controls, such as checkboxes or radio buttons. Toggles are usually larger in size than other controls, and they should be sized so that it’s easy for users to see both the label and the action text.

Toggles can be hardcoded in the code, but this can become cumbersome once you reach a certain scale. Instead, many organizations move their toggle configuration into some sort of centralized store—e.g., an existing application DB or an API —and then build out a user interface for managing those features.