A toggle is a type of control that allows users to select between two opposing states. Toggles are great when you want to allow users to change the settings and preferences of a system, but don’t have enough screen real estate to use radio buttons or checkboxes. They’re also the perfect choice when users need to choose whether a specific feature is ON or OFF, such as turning on Airplane Mode. In these cases, toggles are a better option than using a slider because they take up less space.

In general, toggles should have clear and direct labels that describe what the switch will do when it’s in its current state. Ideally, the label should also indicate what state the switch is currently in (i.e., ON or OFF). Toggle switches should look like sliders and utilize visual cues to make it obvious to the user that they are in a particular state, as well as provide a contrast-based color scheme. Additionally, designers should evaluate the societal and cultural implications of toggle colors to ensure they are appropriate for their audiences.

The word toggle comes from the 18th century, when it was used for a pin that was passed through the eye or loop of a rope to bind it temporarily around a stay or mast. The word has since come to mean a similar kind of fastener, as in the cordlock toggle for stopping a cord or drawstring. It’s now a common part of computer technology, used to refer to any switch that can have only two states, on or off. The term is also used as a verb: “to toggle between tasks,” or “he toggled the phone between the conference room and his office.”

When designing your site or app, be careful when using toggles. To avoid confusion, choose simple labels, design toggles to resemble sliders, and be sure that they always deliver immediate results. If the toggle takes more than a few seconds to change its state, it’s best to replace it with another control, such as a button or a checkbox.