Skip to main content
Guidelines for toggle switch controls

Applies to Windows and Windows Phone

A sample of what a standard toggle switch control looks like

Description

The toggle switch mimics 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). Use these guidelines when adding toggle switch controls to your Windows Store app.

Example

A screenshot that illustrates the standard toogle switch control

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.

Example of a toggle switch

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

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.

    A Toggle switch and a 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

Dos and don'ts

  • 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 them. For example, you might use "Show/Hide" if the setting is "Show images." Using more specific labels can help when localizing the UI.
  • Don't replace the On or Off label unless you must. You should use the default labels unless there are labels that are more specific for the setting.
  • Don't use labels longer than 3 or 4 characters.

Related topics

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