Picchu

Toggle switch

Guidance

The toggle switch mimics a physical switch that allows users to turn things on or off. The control has two states: on and off.

Use a toggle switch for binary operations that become effective immediately after the user changes it. For example, use a toggle switch to turn services or hardware components on or off.

A good way to test whether you should use toggle switch is to think about whether you would use a physical switch to perform the action in your context. After the user toggles the switch on or off, you perform the corresponding action immediately. If any extra step is required for changes to be effective, you should use a checkbox and corresponding Apply button instead of a toggle switch.

Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images." Using more specific labels can help when localizing the UI.

Demo

See the Pen Toggle Demo by Microsoft.com (@microsoft) on CodePen.

Resources