From 180a06eeb7484048c6bfb381b04bd96a858d42e5 Mon Sep 17 00:00:00 2001
From: Gijs Boddeus <botje_gijs@hotmail.com>
Date: Wed, 12 Dec 2018 14:28:25 +0100
Subject: Add switch custom form control (#23004)

---
 site/docs/4.1/components/forms.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'site/docs')

diff --git a/site/docs/4.1/components/forms.md b/site/docs/4.1/components/forms.md
index 29f7fc10b..c47606647 100644
--- 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.
-- 
cgit v1.2.3