Guidelines for toggle switch controls

The toggle switch represents a physical switch that allows users to turn things on or off. The control has two states: on (checked is true) and off (checked is false).

Is this the right control?

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.

WiFi toggle switch, on and 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.

Choosing between toggle switch and check box

In some cases, you could use either a toggle switch or check box. Follow these guidelines to choose between the two.

  • Use a toggle switch for binary settings when changes become effective immediately after the user changes them.

    Toggle switch versus check box

    It's clear in the toggle switch case that the wireless is set to on. But in the checkbox case, users need to think about whether the wireless is on now or whether they need to check the box to turn wireless on.

  • Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box.

    A checkbox and a Submit button
  • Use check boxes or a List View when the user can select multiple items:

    A checkbox that has multiple items selected


  • Replace the On and Off labels when 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 those. For example, you could use "Show/Hide" if the setting is "Show images." Using more specific labels can help when localizing the UI.
  • Avoid replacing the On and Off labels unless you must; stick with the default labels unless the situation calls for custom ones.
  • Labels should be no more than 4 characters long.

Related topics

For designers
Guidelines for buttons
Guidelines for radio buttons
Guidelines for checkboxes
Guidelines for sliders
Guidelines for the select control
For developers (XAML)
ToggleSwitch class
For developers (HTML)
WinJS.UI.ToggleSwitch object
ToggleSwitch.checked property
WinJS.UI.ListView object



© 2015 Microsoft