add indeterminate checkbox support

2 files changed, 19 insertions, 1 deletions

diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 8dfb82651..a349157a2 100644
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -10,7 +10,6 @@
  */
 
 /* global ZeroClipboard */
-/* global SimpleJekyllSearch */
 
 !function ($) {
   'use strict';
@@ -102,6 +101,9 @@
       $(this).prev('.progress-striped').toggleClass('progress-animated')
     })
 
+    // Custom indeterminate checkbox
+    $('.bs-example-indeterminate input').prop('indeterminate', true)
+
     // Config ZeroClipboard
     ZeroClipboard.config({
       moviePath: '/assets/flash/ZeroClipboard.swf',
diff --git a/docs/components/custom-forms.md b/docs/components/custom-forms.md
index 97a469671..f42ce2759 100644
--- a/docs/components/custom-forms.md
+++ b/docs/components/custom-forms.md
@@ -29,6 +29,22 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
 </label>
 {% endexample %}
 
+Custom checkboxes can also utilize the `:indeterminate` pseudo class.
+
+<div class="bs-example bs-example-indeterminate">
+  <label class="c-input c-checkbox">
+    <input type="checkbox">
+    <span class="c-indicator"></span>
+    Check this custom checkbox
+  </label>
+</div>
+
+**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice:
+
+{% highlight js %}
+$('.your-checkbox').prop('indeterminate', true)
+{% endhighlight %}
+
 ### Radios
 
 {% example html %}