diff --git a/jekyll/_components/checkboxes.md b/jekyll/_components/checkboxes.md
index 5aea1923b..a81a199c6 100644
--- a/jekyll/_components/checkboxes.md
+++ b/jekyll/_components/checkboxes.md
@@ -92,6 +92,63 @@ Text Color: Grey 90 `#0c0c0d`
 </div>
 </div>
 
+### Toggle 
+
+<div data-tabs>
+  <input type="radio" name="tstyle" id="style-generic" checked="checked">
+  <label for="style-generic">Light</label>
+  <div data-tab markdown="1">
+
+<div class="grid-2" markdown="1">
+![Toggle in light mode](../images/components/checkboxes/checkbox-toggle-light.png)
+
+<div markdown="1">
+
+Cursor: `pointer`
+
+#### Disabled
+
+Background: Grey 30 `#d7d7db`
+
+Switch(thumb): White `#ffffff`
+
+#### Enabled
+
+Background: Blue 55 `0074e8`
+
+Switch(thumb): White `#ffffff`
+
+</div>
+</div>
+  </div>
+
+
+  <input type="radio" name="tstyle" id="style-success">
+  <label for="style-success">Dark</label>
+  <div data-tab markdown="1">
+
+<div class="grid-2" markdown="1">
+![Toggle in dark mode](../images/components/checkboxes/checkbox-toggle-dark.png)
+
+<div markdown="1">
+Cursor: `pointer`
+
+#### Disabled
+
+Background: Grey 60 `#4a4a4f`
+
+Switch(thumb): Grey 40 `#b1b1b3`
+
+#### Enabled
+
+Background: Blue 55 `0074e8`
+
+Switch(thumb): White `#ffffff`
+</div>
+</div>
+  </div>
+</div>
+
 ## Behaviors
 
 ### On / Off
@@ -184,6 +241,23 @@ Box Shadow: `0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132,
 </div>
 </div>
 
+
+#### Toggle Animation
+
+<div class="grid-2" markdown="1">
+![Toggle slide animation](../images/components/checkboxes/checkbox-toggle-animation.gif)
+{:.animated}
+
+<div markdown="1">
+On click, the toggle control animates between disabled and enabled states.
+
+The animation includes the transitioning background colors and the switch movement from left to right (enabling) and right to left (disabling).
+
+
+</div>
+</div>
+
+
 ## Copy Rules
 
 * Use the imperative voice for checkbox labels.
@@ -191,3 +265,16 @@ Box Shadow: `0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132,
 * Do not use terminal punctuation for checkbox labels.
 
 * Maintain parallel construction for lists of related checkbox labels.
+
+## Future Improvements
+
+<div class="grid-2" markdown="1">
+![Toggle slide animation](../images/components/checkboxes/checkbox-toggle-future.svg)
+{:.animated}
+
+<div markdown="1">
+A revision to the toggle control is soon to appear in the ‘about’ pages of Firefox. The redesign features a tick symbol to reinforce clarity of the enabled state.
+
+
+</div>
+</div>
diff --git a/jekyll/images/components/checkboxes/checkbox-toggle-animation.gif b/jekyll/images/components/checkboxes/checkbox-toggle-animation.gif
new file mode 100644
index 000000000..5d6593f04
Binary files /dev/null and b/jekyll/images/components/checkboxes/checkbox-toggle-animation.gif differ
diff --git a/jekyll/images/components/checkboxes/checkbox-toggle-dark.png b/jekyll/images/components/checkboxes/checkbox-toggle-dark.png
new file mode 100644
index 000000000..b23aeba8d
Binary files /dev/null and b/jekyll/images/components/checkboxes/checkbox-toggle-dark.png differ
diff --git a/jekyll/images/components/checkboxes/checkbox-toggle-future.svg b/jekyll/images/components/checkboxes/checkbox-toggle-future.svg
new file mode 100644
index 000000000..af7eed92e
--- /dev/null
+++ b/jekyll/images/components/checkboxes/checkbox-toggle-future.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="360px" height="240px" viewBox="0 0 360 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Checkboc-toggle-future</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Checkboc-toggle-future" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect fill="#FFFFFF" x="0" y="0" width="360" height="240"></rect>
+        <g id="input/toogle/on-copy" transform="translate(130.000000, 92.000000)">
+            <rect id="Rectangle-2332-Copy" stroke="#0060DF" stroke-width="2.79999995" fill="#0A84FF" x="1.39999998" y="1.39999998" width="98.2" height="53.2" rx="26.6"></rect>
+            <g id="Glyph-/-Check-light" transform="translate(11.222222, 11.200000)" stroke="#F9F9FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.5999999">
+                <polyline id="Path-4" points="5.2888888 17.9822219 13.7511109 27.5022218 28.5599995 5.2888888"></polyline>
+            </g>
+            <ellipse id="Oval-38-Copy" stroke-opacity="0.5" stroke="#0060DF" stroke-width="2.79999995" fill="#FFFFFF" cx="72.9444444" cy="28" rx="23.8444444" ry="23.8"></ellipse>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/jekyll/images/components/checkboxes/checkbox-toggle-light.png b/jekyll/images/components/checkboxes/checkbox-toggle-light.png
new file mode 100644
index 000000000..8203ba56a
Binary files /dev/null and b/jekyll/images/components/checkboxes/checkbox-toggle-light.png differ