diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 5f7f89e..f9bdfeb 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -611,3 +611,7 @@ - Bumped demo stylesheet to latest commit. - Tweaked `tab` module colors and variables for consistency with the rest of the modules. - Added basic documentation for `form`s and `input`s in the `input_control` doc page. + +## 20161207 + +- Documented `radio` and `checkbox` in the `input_control` doc page. diff --git a/docs/v2/input_control.html b/docs/v2/input_control.html index 1fcc8e8..409dc34 100644 --- a/docs/v2/input_control.html +++ b/docs/v2/input_control.html @@ -303,29 +303,83 @@
- +
+
+
+ +
+

+
+   
+   
+   
+
+

+
-

+

Checkboxes and radio buttons come pre-styled, using the checkbox hack, while remaining fully accessible. To create a checkbox or radio button, start using a <div> that implements the .input-group class, and then add a proper <input> inside it (checkbox or radio), followed immediately by a <label> linking to it. Remember to add tabindex="0" to your <input>, so that it will register properly for screen readers.

Sample code

- 

+                
<div class="input-group">
+  <input type="checkbox" id="check1" tabindex="0"> 
+  <label for="check1">Checkbox</label>
+</div>
+
+<div class="input-group">
+  <input type="radio" id="rad1" tabindex="0" name="radio-group-1"> 
+  <label for="rad1">Radio</label>
+</div>

               

             

             

             
Notes

               
               

               

                 

-                  

-                  
Do: 

+                  
<div class="input-group">
+  <input type="radio" id="rad1" tabindex="0" name="radio-group-1"> 
+  <label for="rad1">Value 1</label>
+  <input type="radio" id="rad2" tabindex="0" name="radio-group-1"> 
+  <label for="rad2">Value 2</label>
+</div>

+                  
Do: You can add multiple radio buttons inside one .input-group, as long as they follow the syntax shown above. In fact, we strongly recommend grouping controls that are relevant to each other in this manner.

                 

                 

-                  

-                  
Don't: 

+                  
<input type="checkbox" id="check1" tabindex="0"> 
+<label for="check1">Checkbox</label>

+                  
Don't: Always use an .input-group for your checkboxes and radio buttons. Not doing so will cause the checkbox or radio button to not display properly.

+                

+                

+                  
<div class="input-group">
+  <input type="checkbox" id="check1"
+  <label for="check1">Checkbox</label>
+</div>

+                  
Don't: Remember to add tabindex="0" to all your checkboxes and radio buttons to make them accessible.

+                

+                

+                  
<div class="input-group"> 
+  <label for="check1">Checkbox</label>
+  <input type="checkbox" id="check1" tabindex="0">
+</div>

+                  
Don't: The structure of checkboxes and radio buttons is very strict, meaning that the <label> should always be after the <input> and never before, otherwise the checkbox or radio button will not display properly.

+                

+                

+                  
<div class="input-group">
+  <input type="radio" id="rad1" tabindex="0" name="radio-group-1"> 
+  <input type="radio" id="rad2" tabindex="0" name="radio-group-1"> 
+  <label for="rad2">Value 2</label>
+  <label for="rad1">Value 1</label>
+</div>

+                  
Don't: When using multiple radio buttons inside an .input-group, remember to use the usual structure of the radio button component for each radio button (i.e. the <input> and <label>). Not doing so will cause the radio buttons to not display properly.

+                

+                

+                  
<div class="input-group">
+  <input type="checkbox" id="check1" tabindex="0">
+</div>

+                  
Don't: Never leave a checkbox or radio button without a <label>. The <label> is essential to properly display the checkbox or radio button.