update checkbox examples

Author: levithomason

docs/app/Examples/modules/Checkbox/States/Checked.js

@@ -12,7 +12,7 @@ export default class CheckboxCheckedExample extends Component {
 
   render() {
     return (
-      <Checkbox label='This checkbox comes prechecked' checked={this.state.isChecked} onChange={this.handleChange} />
+      <Checkbox defaultChecked={true} label='This checkbox comes prechecked' />
     );
   }
 }

docs/app/Examples/modules/Checkbox/States/States.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
 
 export default class CheckboxStatesExamples extends Component {
   render() {
@@ -10,7 +11,17 @@ export default class CheckboxStatesExamples extends Component {
           title='Checked'
           description='A checkbox can come pre-checked'
           examplePath='modules/Checkbox/States/Checked'
-        />
+        >
+          <Message className='info'>
+            Use
+            &nbsp;
+            <a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
+              <code>defaultChecked</code>
+            </a>
+            &nbsp;
+            as you normally would to set default form values.
+          </Message>
+        </ComponentExample>
         <ComponentExample
           title='Disabled'
           description='Checkboxes can be disabled'

docs/app/Examples/modules/Checkbox/Variations/Fitted.js

@@ -6,13 +6,13 @@ export default class CheckboxFittedExample extends Component {
     return (
       <div>
         <Segment className='compact'>
-          <Checkbox className='fitted' />
+          <Checkbox />
         </Segment>
         <Segment className='compact'>
-          <Checkbox className='fitted slider' />
+          <Checkbox className='slider' />
         </Segment>
         <Segment className='compact'>
-          <Checkbox className='fitted toggle' />
+          <Checkbox className='toggle' />
         </Segment>
       </div>
     );

docs/app/Examples/modules/Checkbox/Variations/Variations.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
 
 export default class CheckboxVariationsExamples extends Component {
   render() {
@@ -10,7 +11,15 @@ export default class CheckboxVariationsExamples extends Component {
           title='Fitted'
           description='A fitted checkbox does not leave padding for a label'
           examplePath='modules/Checkbox/Variations/Fitted'
-        />
+        >
+          <Message>
+            The&nbsp;
+            <a href='http://semantic-ui.com/modules/checkbox.html#fitted' target='_blank'>
+              fitted
+            </a>
+            &nbsp;class is automatically applied if there is no <code>label</code> prop.
+          </Message>
+        </ComponentExample>
       </ExampleSection>
     );
   }