ToggleSwitch

When to use

Use for settings that take effect immediately. like enabling/disabling a feature. Toggle switches should deliver instant results without requiring a submit button.

When not to use

In forms that require a submit button, use Checkbox instead. Users expect toggles to apply immediately. mixing them with submit forms causes confusion.

Guidelines

  • Immediate effect: Toggles must apply instantly. Never pair with a Save button.
  • Concise labels: Describe the "on" state directly. "Email notifications" not "Enable email notifications?"
  • High contrast: Use clear visual difference between on and off states.
  • Consistency: If you use toggles in one settings section, use them throughout. Don't mix toggles and checkboxes for the same type of setting.

How it works

Enabled
Disabled toggle