SWITCH

When to Use

Example: account preferences

  • Toggling a setting or feature that takes effect immediately (e.g. dark mode, notifications)
  • Binary on/off preferences in settings panels or forms
  • When the result of the toggle is instantly visible without a submit action
  • Use Checkbox instead when the change requires explicit form submission

Usage Guidelines

DO

Use for enabling/disabling a setting that takes immediate effect (e.g. "Allow notifications", "Remember me")

Don’t

Don't use Switch for batch selection — use Checkbox instead

DO

Use for toggling a single boolean property without needing to combine multiple inputs before submitting

Don’t

Don't use Switch for unpredictable or destructive actions — use Button + Dialog confirmation instead

DO

Keep Switch and Checkbox usage patterns distinct within the same form

Don’t

Don't mix Checkbox and Switch in the same list — it increases cognitive load

Accessibility

  • Uses Radix UI @radix-ui/react-switch, native role="switch" + aria-checked to express the current state.
  • The switch should always have a clear label describing "what this setting does", not just "on / off".
  • Use disabled for the disabled state and ensure sufficient contrast difference from the enabled state.