Complete docs for checkbox

components/checkbox/index.jsx

@@ -66,10 +66,10 @@ class Checkbox extends React.Component {
           onChange={this.handleChange}
           onClick={this.handleInputClick}
         />
-        <span role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
+        <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
+          <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
         </span>
-        { this.props.label ? <span role='label' className={style.text}>{this.props.label}</span> : null }
+        { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
       </label>
     );
   }

components/checkbox/readme.md

@@ -1 +1,43 @@
-# checkbox
+# Checkbox
+
+[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
+
+<!-- example -->
+```jsx
+import Checkbox from 'react-toolbox/checkbox';
+
+const TestCheckbox = () => (
+  <div>
+    <Checkbox label="Checked option" checked />
+    <Checkbox label="Unchecked option" />
+    <Checkbox label="Disabled checkbox" checked disabled />
+  </div>
+);
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| checked       | Bool        |   `false`        | If true, the checkbox will be checked.|
+| className     | String        |     `''`            | Sets a class to give customized styles to the checkbox field.|
+| disabled         | Bool        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
+| label         | String        |                 | Text label to attach next to the checkbox element.|
+| name       | String       | `false`                | The name of the field to set in the input checkbox.|
+| onBlur       | Function       |                | Callback called when the checkbox is blurred.|
+| onChange       | Function       |                | Callback called when the checkbox value is changed.|
+| onFocus       | Function       |                | Callback called when the checkbox is focused |
+
+## Structure
+
+In a checkbox the structure depends on the label option. Apart from it, it's always the same:
+
+```html
+<label data-react-toolbox="checkbox" 
+  <input label="Checked checkbox" checked="" type="checkbox" />
+  <span data-role="checkbox">
+    <span data-react-toolbox="ripple">...</span>
+  </span>
+  <span data-role="label">Checkbox label</span>
+</label>
+```

components/list/style.scss

@@ -57,7 +57,7 @@
     &:not(.checkbox-item) {
       opacity: .5;
     }
-    > .checkbox > [role='label'] {
+    > .checkbox > [data-role='label'] {
       opacity: .5;
     }
   }
@@ -70,10 +70,10 @@
   align-items: center;
   margin: 0;
   cursor: pointer;
-  > [role='checkbox'] {
+  > [data-role='checkbox'] {
     margin-right: $list-item-right-icon-margin;
   }
-  > [role='label'] {
+  > [data-role='label'] {
     padding-left: 0;
   }
 }

docs/app/components/layout/main/modules/components.js

@@ -27,6 +27,7 @@ import TimePicker from 'react-toolbox/time_picker/readme';
 import ButtonExample1 from './examples/button_example_1.txt';
 import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
+import CheckboxExample1 from './examples/checkbox_example_1.txt';
 
 export default {
   app_bar: {
@@ -55,7 +56,8 @@ export default {
   checkbox: {
     name: 'Checkbox',
     docs: Checkbox,
-    path: '/components/checkbox'
+    path: '/components/checkbox',
+    examples: [CheckboxExample1]
   },
   date_picker: {
     name: 'Date Picker',

docs/app/components/layout/main/modules/examples/checkbox_example_1.txt

@@ -0,0 +1,9 @@
+const TestCheckbox = () => (
+  <div>
+    <Checkbox label="Checked option" checked />
+    <Checkbox label="Unchecked option" />
+    <Checkbox label="Disabled checkbox" checked disabled />
+  </div>
+);
+
+return <TestCheckbox />;