From 35c11b69df526bcb5aa2a5504de7517f1e6affb8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 9 May 2016 11:00:36 -0700
Subject: [PATCH] Update checkboxes and radios docs
- Add lighter gray text to disabled state for .form-check
- Separate radios and checkboxes example
- Clarify docs
---
docs/components/forms.md | 6 +++++-
scss/_forms.scss | 1 +
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 00d26b2662..8748d8455c 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -427,10 +427,12 @@ Grid-based form layouts also support large and small inputs.
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
-Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`.
+Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`. The disabled class will also lighten the text color to help indicate the input's state.
### Default (stacked)
+By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
+
{% example html %}
<div class="form-check">
<label class="form-check-label">
@@ -444,7 +446,9 @@ Disabled checkboxes and radios are supported, but to provide a `not-allowed` cur
Option two is disabled
</label>
</div>
+{% endexample %}
+{% example html %}
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 32836182c3..7651c10668 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -198,6 +198,7 @@ select.form-control-lg {
&.disabled {
.form-check-label {
+ color: $text-muted;
cursor: $cursor-disabled;
}
}
--
GitLab