Add switch custom form control (#23004)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index e999daf0ca8b2c30790a67a0f2fd7f1b66020596..71eb746b82838179e5c28d2cfcee13b8e1fa300a 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -161,6 +161,47 @@
 }
 
 
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  padding-left: $custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size);
+
+  .custom-control-label {
+    &::before {
+      left: -($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size));
+      width: $custom-switch-width;
+      pointer-events: all;
+      border-radius: $custom-switch-indicator-border-radius;
+    }
+
+    &::after {
+      top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
+      left: calc(#{-($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size))} + #{$custom-control-indicator-border-width * 2});
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+      background-color: $custom-control-indicator-border-color;
+      border-radius: $custom-switch-indicator-border-radius;
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-color: $custom-control-indicator-bg;
+      transform: translateX($custom-switch-width - $custom-control-indicator-size);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 057a149ea8f7f9011627ea4ae95f85e704567e96..2d0816808e99f49a056c77a2f43ad6ca21bcb666 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -555,6 +555,10 @@ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicato
 $custom-radio-indicator-border-radius:          50% !default;
 $custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+
 $custom-select-padding-y:           $input-btn-padding-y !default;
 $custom-select-padding-x:           $input-btn-padding-x !default;
 $custom-select-height:              $input-height !default;

diff --git a/site/docs/4.1/components/forms.md b/site/docs/4.1/components/forms.md
index 29f7fc10bc59d1dea29977398aeae4810fe87e73..c47606647f7b943d9c20ca40ad1984efd28b3f75 100644 (file)
--- a/site/docs/4.1/components/forms.md
+++ b/site/docs/4.1/components/forms.md
@@ -1185,6 +1185,22 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
 {% endcapture %}
 {% include example.html content=example %}
 
+### Switches
+
+A switch has the markup of a custom checkbox but uses the `.custom-switch` class to render a toggle switch. Switches also support the `disabled` attribute.
+
+{% capture example %}
+<div class="custom-control custom-switch">
+  <input type="checkbox" class="custom-control-input" id="customSwitch1">
+  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
+</div>
+<div class="custom-control custom-switch">
+  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
+  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 ### Select menu
 
 Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.