The ToggleSwitch 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.
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 ListView when the user can select multiple items:
Do's and Don'ts
| Do | 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 | 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
Build date: 11/29/2012
