Toggle is a control that allows users to change the default state (either ON or OFF). It’s the right control for when you want to let your users choose between two options (instead of one option with a ‘yes’ or ‘no’ response). For example, the Airplane Mode toggle on mobile devices. It’s also the preferred method to adjust settings on mobile devices because it takes up less screen estate than a radio button.
The word toggle is derived from the 18th century definition, “pin passed transversely through the eye or bight of a rope to bind it round a stay or mast.” Today, we use the term figuratively for changing between tasks—such as toggling between screens as you video chat with two friends at once.
When designing a toggle, make sure it’s clearly visible and its new state is immediately apparent to the user. Consider using high-contrast colors and avoiding color combinations that may be confusing. Additionally, it’s best to avoid toggles with ambiguous labels or a muddled semantics (i.e. “on/off”). Instead, short and direct labels should be used that are easy to read.
Toggle switches should look like sliders and use visual cues to help prevent user confusion. Additionally, the toggle should be easy to click and apply its new state—without additional action such as clicking a Save or Confirm button. If these requirements aren’t possible, replace the toggle with a checkbox. Toggle switches should be used sparingly, and only when a user needs to update preferences, settings or other types of information.
