Guidelines and checklist for toggle switches (Windows Runtime apps)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This topic describes best practices for using ToggleSwitch controls in your Windows Store app using C++, C#, or Visual Basic.

Roadmap: How does this topic relate to others? See:

The ToggleSwitch mimics a physical switch that allows users to turn things on or off. The control has two states: on (IsOn is true) and off (IsOn is false). Use these guidelines when adding toggle switch controls to your Windows Store app using C++, C#, or Visual Basic.

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.

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.

    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.

  • Use check boxes or a ListBox when the user can select multiple items:

Do's and Don'ts

Do

Replace the On and Off content 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

Don't replace the On or Off content 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.

 

ToggleSwitch