[docs] Improve selection controls section

docs/src/pages/demos/bottom-navigation/bottom-navigation.md

@@ -4,7 +4,7 @@ components: BottomNavigation, BottomNavigationButton
 
 # Bottom Navigation
 
-[Bottom navigation](https://material.google.com/components/bottom-navigation.html) bars make it easy to explore and switch between top-level views in a single tap.
+[Bottom navigation](https://material.io/guidelines/components/bottom-navigation.html) bars make it easy to explore and switch between top-level views in a single tap.
 
 ## Bottom Navigation
 When there are only **three** actions, display both icons and text labels at all times.

docs/src/pages/demos/buttons/buttons.md

@@ -4,7 +4,7 @@ components: Button, IconButton, ButtonBase
 
 # Buttons
 
-[Buttons](https://material.google.com/components/buttons.html) communicate the action that will occur when the user touches them.
+[Buttons](https://material.io/guidelines/components/buttons.html) communicate the action that will occur when the user touches them.
 
 Material buttons trigger an ink reaction on press.
 They may display text, imagery, or both.

docs/src/pages/demos/cards/cards.md

@@ -4,7 +4,7 @@ components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse
 
 # Cards
 
-A [card](https://material.google.com/components/cards.html) is a sheet of material that serves as an entry point to more detailed information.
+A [card](https://material.io/guidelines/components/cards.html) is a sheet of material that serves as an entry point to more detailed information.
 
 Cards display content composed of different elements whose size or supported actions vary.
 

docs/src/pages/demos/dialogs/dialogs.md

@@ -4,7 +4,7 @@ components: Dialog, DialogTitle, DialogContent, DialogActions
 
 # Dialogs
 
-[Dialogs](https://material.google.com/components/dialogs.html) inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
+[Dialogs](https://material.io/guidelines/components/dialogs.html) inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
 
 Dialogs contain text and UI controls.
 They retain focus until dismissed or a required action has been taken.

docs/src/pages/demos/dividers/dividers.md

@@ -4,7 +4,7 @@ components: Divider
 
 # Dividers
 
-[Dividers](https://material.google.com/components/dividers.html) group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.
+[Dividers](https://material.io/guidelines/components/dividers.html) group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.
 
 ## List Dividers
 

docs/src/pages/demos/lists/lists.md

@@ -4,7 +4,7 @@ components: List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryActio
 
 # Lists
 
-[Lists](https://material.google.com/components/lists.html) present multiple line items vertically as a single continuous element.
+[Lists](https://material.io/guidelines/components/lists.html) present multiple line items vertically as a single continuous element.
 
 Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text.
 

docs/src/pages/demos/menus/menus.md

@@ -4,7 +4,7 @@ components: Menu, MenuItem, MenuList
 
 # Menus
 
-[Menus](https://material.google.com/components/menus.html) display a list of choices on a transient sheet of material.
+[Menus](https://material.io/guidelines/components/menus.html) display a list of choices on a transient sheet of material.
 
 Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
 

docs/src/pages/demos/progress/progress.md

@@ -4,7 +4,7 @@ components: CircularProgress, LinearProgress
 
 # Progress
 
-[Progress and activity indicators](https://material.google.com/components/progress-activity.html)
+[Progress and activity indicators](https://material.io/guidelines/components/progress-activity.html)
 are visual indications of an app loading content.
 
 A single visual indicator should be used to represent each type of operation.

docs/src/pages/demos/selection-controls/CheckboxesGroup.js

@@ -0,0 +1,74 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import {
+  FormLabel,
+  FormControl,
+  FormGroup,
+  FormControlLabel,
+  FormHelperText,
+} from 'material-ui/Form';
+import Checkbox from 'material-ui/Checkbox';
+
+const styles = {};
+
+class CheckboxesGroup extends React.Component {
+  state = {
+    gilad: true,
+    jason: false,
+    antoine: true,
+  };
+
+  handleChange = name => (event, checked) => {
+    this.setState({ [name]: checked });
+  };
+
+  render() {
+    return (
+      <FormControl component="fieldset">
+        <FormLabel component="legend">Assign responsibility</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.gilad}
+                onChange={this.handleChange('gilad')}
+                value="gilad"
+              />
+            }
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.jason}
+                onChange={this.handleChange('jason')}
+                value="jason"
+              />
+            }
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={this.state.antoine}
+                onChange={this.handleChange('antoine')}
+                value="antoine"
+              />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>Be careful</FormHelperText>
+      </FormControl>
+    );
+  }
+}
+
+CheckboxesGroup.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CheckboxesGroup);

docs/src/pages/demos/selection-controls/RadioButtonsGroup.js

@@ -4,9 +4,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import Radio, { RadioGroup } from 'material-ui/Radio';
-import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';
+import { FormLabel, FormControl, FormControlLabel, FormHelperText } from 'material-ui/Form';
 
 const styles = theme => ({
+  root: {
+    display: 'flex',
+  },
+  formControl: {
+    margin: theme.spacing.unit * 3,
+  },
   group: {
     margin: `${theme.spacing.unit}px 0`,
   },
@@ -25,21 +31,39 @@ class RadioButtonsGroup extends React.Component {
     const classes = this.props.classes;
 
     return (
-      <FormControl component="fieldset" required>
-        <FormLabel component="legend">Gender</FormLabel>
-        <RadioGroup
-          aria-label="gender"
-          name="gender"
-          className={classes.group}
-          value={this.state.value}
-          onChange={this.handleChange}
-        >
-          <FormControlLabel value="male" control={<Radio />} label="Male" />
-          <FormControlLabel value="female" control={<Radio />} label="Female" />
-          <FormControlLabel value="other" control={<Radio />} label="Other" />
-          <FormControlLabel value="disabled" disabled control={<Radio />} label="Disabled" />
-        </RadioGroup>
-      </FormControl>
+      <div className={classes.root}>
+        <FormControl component="fieldset" required className={classes.formControl}>
+          <FormLabel component="legend">Gender</FormLabel>
+          <RadioGroup
+            aria-label="gender"
+            name="gender"
+            className={classes.group}
+            value={this.state.value}
+            onChange={this.handleChange}
+          >
+            <FormControlLabel value="male" control={<Radio />} label="Male" />
+            <FormControlLabel value="female" control={<Radio />} label="Female" />
+            <FormControlLabel value="other" control={<Radio />} label="Other" />
+            <FormControlLabel value="disabled" disabled control={<Radio />} label="Disabled" />
+          </RadioGroup>
+        </FormControl>
+        <FormControl component="fieldset" required error className={classes.formControl}>
+          <FormLabel component="legend">Gender</FormLabel>
+          <RadioGroup
+            aria-label="gender"
+            name="gender"
+            className={classes.group}
+            value={this.state.value}
+            onChange={this.handleChange}
+          >
+            <FormControlLabel value="male" control={<Radio />} label="Male" />
+            <FormControlLabel value="female" control={<Radio />} label="Female" />
+            <FormControlLabel value="other" control={<Radio />} label="Other" />
+            <FormControlLabel value="disabled" disabled control={<Radio />} label="Disabled" />
+          </RadioGroup>
+          <FormHelperText>You can display an error</FormHelperText>
+        </FormControl>
+      </div>
     );
   }
 }

docs/src/pages/demos/selection-controls/SwitchLabels.js

@@ -1,7 +1,7 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 import React from 'react';
-import { FormControlLabel } from 'material-ui/Form';
+import { FormControlLabel, FormGroup } from 'material-ui/Form';
 import Switch from 'material-ui/Switch';
 
 class SwitchLabels extends React.Component {
@@ -12,7 +12,7 @@ class SwitchLabels extends React.Component {
 
   render() {
     return (
-      <div>
+      <FormGroup>
         <FormControlLabel
           control={
             <Switch
@@ -32,7 +32,7 @@ class SwitchLabels extends React.Component {
           label="B"
         />
         <FormControlLabel control={<Switch />} disabled label="C" />
-      </div>
+      </FormGroup>
     );
   }
 }

docs/src/pages/demos/selection-controls/selection-controls.md

@@ -4,7 +4,7 @@ components: FormControl, FormGroup, FormLabel, FormControlLabel, RadioGroup, Che
 
 # Selection Controls
 
-[Selection controls](https://material.google.com/components/selection-controls.html) allow the user to select options.
+[Selection controls](https://material.io/guidelines/components/selection-controls.html) allow the user to select options.
 
 Three types of selection controls are covered in this guidance:
 
@@ -22,6 +22,10 @@ If you have a single option, avoid using a checkbox and use an on/off switch ins
 
 {{demo='pages/demos/selection-controls/Checkboxes.js'}}
 
+`FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API.
+
+{{demo='pages/demos/selection-controls/CheckboxesGroup.js'}}
+
 ## Radio Buttons
 
 Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
@@ -42,6 +46,6 @@ On/off switches toggle the state of a single settings option. The option that th
 
 {{demo='pages/demos/selection-controls/Switches.js'}}
 
-`Switch` can also be used with a `label`.
+`Switch` can also be used with a label description thanks to the `FormControlLabel` component.
 {{demo='pages/demos/selection-controls/SwitchLabels.js'}}
 

docs/src/pages/demos/tables/tables.md

@@ -4,7 +4,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
 
 # Tables
 
-[Data tables](https://material.google.com/components/data-tables.html) display sets of raw data.
+[Data tables](https://material.io/guidelines/components/data-tables.html) display sets of raw data.
 They usually appear in desktop enterprise products.
 
 ## Structure

docs/src/pages/demos/tabs/tabs.md

@@ -4,7 +4,7 @@ components: Tabs, Tab
 
 # Tabs
 
-[Tabs](https://material.google.com/components/tabs.html) make it easy to explore and switch between different views.
+[Tabs](https://material.io/guidelines/components/tabs.html) make it easy to explore and switch between different views.
 
 ## Basic Tabs
 

docs/src/pages/demos/text-fields/text-fields.md

@@ -4,7 +4,7 @@ components: Input, InputLabel, TextField, FormHelperText, FormControl
 
 # Text Fields
 
-[Text fields](https://material.google.com/components/text-fields.html) allow users to input text and usually appear in forms.
+[Text fields](https://material.io/guidelines/components/text-fields.html) allow users to input text and usually appear in forms.
 Users may enter text, numbers, or mixed-format types of input.
 
 ## TextField

pages/demos/selection-controls.js

@@ -15,6 +15,13 @@ function Page() {
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/selection-controls/Checkboxes'), 'utf8')
+`,
+        },
+        'pages/demos/selection-controls/CheckboxesGroup.js': {
+          js: require('docs/src/pages/demos/selection-controls/CheckboxesGroup').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/selection-controls/CheckboxesGroup'), 'utf8')
 `,
         },
         'pages/demos/selection-controls/RadioButtonsGroup.js': {