diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss
index d2e8ccdd56..e154d37148 100644
--- a/packages/core/src/components/forms/_controls.scss
+++ b/packages/core/src/components/forms/_controls.scss
@@ -265,7 +265,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       background: $switch-background-color;
       width: $switch-width;
       height: $switch-height;
-      transition: background $pt-transition-duration $pt-transition-ease;
+      transition: background-color $pt-transition-duration $pt-transition-ease;
 
       &::before {
         display: block;
@@ -283,6 +283,10 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       }
     }
 
+    &.#{$ns}-align-right {
+      padding-right: $switch-width + $pt-grid-size;
+    }
+
     input:checked ~ .#{$ns}-control-indicator {
       box-shadow: none;
       background-color: $switch-checked-background-color;
@@ -361,6 +365,11 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       font-size: $control-indicator-size-large;
     }
 
+    &.#{$ns}-align-right {
+      padding-right: $control-indicator-size-large + $pt-grid-size;
+      padding-left: 0;
+    }
+
     &.#{$ns}-checkbox input:checked ~ .#{$ns}-control-indicator::before {
       top: 1px;
     }
@@ -390,6 +399,10 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
           left: $switch-width-large - $switch-height-large + $switch-indicator-margin;
         }
       }
+
+      &.#{$ns}-align-right {
+        padding-right: $switch-width-large + $pt-grid-size;
+      }
     }
   }