Switch

​

Switch

​

When to use

• To turn something on or off, like enabling notifications or toggling a setting.
• For immediate actions where changes happen instantly and don’t require confirmation (e.g., turning on dark mode).

​

When to use something else

• Deferred or form-bound changes: use Checkbox or explicit Button submit.
• One-shot actions (delete, submit): use Button.
• Several related on/off settings: use Toggle group, Checkbox, or Select—not a single Switch per unrelated setting.

​

Dos and don’ts

• Don’t use Switches inside Menus to toggle a setting on/off (e.g., “Show grid lines”, “Show axis”). Instead, use a toggle menu item that displays a checkmark when something is on and remove the checkmark when something is off.
• Do use clear descriptive labels to explain what the Switch controls.
• Don’t use Switches for destructive actions.

​

Behavior

• Toggles immediately on interaction; state should reflect the backing setting without requiring a separate submit unless the form pattern says otherwise.
• Do not embed Switch in Menu rows; use menu checkmark toggles per guidance above.

​

Often used with

• Label (often inline), Helper text when the setting needs explanation; not inside Menu rows—use menu checkmarks instead.