Switch

When to use

• Use a switch for a binary choice that follows a boolean relationship: on/off, true/false, enable/disable, activate/deactivate.
• Use a switch when the item being toggled has a clear default state, for example notifications default to off until the user opts in.
• Use a switch when the change takes effect immediately, with no need for a separate save or submit action.
• Use a switch when the action is reversible without confirmation. Flipping it back undoes the change with no risk of data loss.
• Use a switch to turn a single option on or off inline, in a settings list, a table row, or a full page of preferences.

When not to use

• Don’t use a switch when a submit button applies or saves the selection, or when the toggle sits inside a form with other fields (text inputs, checkboxes) that save together. Use a checkbox instead.
• Don’t use a switch when the two choices don’t map to a boolean relationship, for example “List” vs. “Grid” view. Use a button group or content switcher instead.
• Don’t use a switch when there are more than two choices. Use a select or radio button group instead.
• Don’t use a switch when multiple items, including nested items, can be selected and the result must be saved or submitted. Use checkboxes instead.
• Don’t use a switch when only one item can be selected from a list and the result must be saved or submitted. Use a radio button instead.
• Don’t use a switch when the action requires immediate confirmation or is destructive or hard to reverse, for example deleting a file. Use a checkbox paired with a button, or a confirmation dialog, instead.
• Don’t use a switch when users are selecting from a list of items rather than flipping a setting. Use a multiselect instead.

Label usage

Switches must feature a descriptive label.

• Write clear labels. The label should describe what the control does when the switch is on.
• Keep labels short and direct, ideally one or two words, using nouns that describe the setting’s function.
• Don’t add labels that describe the switch’s value, such as “On” or “Off”. A switch is always either on or off, so restating this only adds clutter.
• Place labels to the left of the switch. Left-aligned labels fit the way users scan a layout in left-to-right reading cultures. Mirror this for right-to-left reading audiences.