mui · oliviertassinari · Mar 21, 2021 · Mar 14, 2021 · Mar 15, 2021 · Mar 15, 2021
diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -51,7 +51,7 @@ However, you can use different structures by providing a `getOptionLabel` prop.
 
 ### Playground
 
-Each of the following examples demonstrate one feature of the Autocomplete component.
+Each of the following examples demonstrates one feature of the Autocomplete component.
 
 {{"demo": "pages/components/autocomplete/Playground.js"}}
 
@@ -61,14 +61,14 @@ Choose one of the 248 countries.
 
 {{"demo": "pages/components/autocomplete/CountrySelect.js"}}
 
-### Controllable states
+### Controlled states
 
 The component has two states that can be controlled:
 
 1. the "value" state with the `value`/`onChange` props combination. This state represents the value selected by the user, for instance when pressing <kbd class="key">Enter</kbd>.
 2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox.
 
-> ⚠️ These two state are isolated, they should be controlled independently.
+> ⚠️ These two states are isolated, they should be controlled independently.
 
 {{"demo": "pages/components/autocomplete/ControllableStates.js"}}
 

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -6,15 +6,8 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function CheckboxLabels() {
   return (
     <FormGroup>
-      <FormControlLabel
-        control={<Checkbox defaultChecked name="checkedA" />}
-        label="Secondary"
-      />
-      <FormControlLabel
-        disabled
-        control={<Checkbox name="checkedB" />}
-        label="Disabled"
-      />
+      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
+      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -6,15 +6,8 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function CheckboxLabels() {
   return (
     <FormGroup>
-      <FormControlLabel
-        control={<Checkbox defaultChecked name="checkedA" />}
-        label="Secondary"
-      />
-      <FormControlLabel
-        disabled
-        control={<Checkbox name="checkedB" />}
-        label="Disabled"
-      />
+      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
+      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -4,14 +4,10 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function Checkboxes() {
   return (
     <div>
-      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
-      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
-      <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Checkbox
-        disabled
-        checked
-        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
-      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked' }} />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled' }} />
+      <Checkbox disabled inputProps={{ 'aria-label': 'disabled' }} />
+      <Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked' }} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -4,14 +4,10 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function Checkboxes() {
   return (
     <div>
-      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
-      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
-      <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Checkbox
-        disabled
-        checked
-        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
-      />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'checked' }} />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled' }} />
+      <Checkbox disabled inputProps={{ 'aria-label': 'disabled' }} />
+      <Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked' }} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js
@@ -5,12 +5,20 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function ColorCheckboxes() {
   return (
     <div>
-      <Checkbox defaultChecked name="checkedA" />
-      <Checkbox defaultChecked name="checkedB" color="primary" />
-      <Checkbox defaultChecked name="checkedC" color="default" />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'secondary' }} />
       <Checkbox
         defaultChecked
-        name="checkedD"
+        color="primary"
+        inputProps={{ 'aria-label': 'primary' }}
+      />
+      <Checkbox
+        defaultChecked
+        color="default"
+        inputProps={{ 'aria-label': 'default' }}
+      />
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'custom' }}
         sx={{
           color: green[800],
           '&.Mui-checked': {

diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
@@ -5,12 +5,20 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function ColorCheckboxes() {
   return (
     <div>
-      <Checkbox defaultChecked name="checkedA" />
-      <Checkbox defaultChecked name="checkedB" color="primary" />
-      <Checkbox defaultChecked name="checkedC" color="default" />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'secondary' }} />
       <Checkbox
         defaultChecked
-        name="checkedD"
+        color="primary"
+        inputProps={{ 'aria-label': 'primary' }}
+      />
+      <Checkbox
+        defaultChecked
+        color="default"
+        inputProps={{ 'aria-label': 'default' }}
+      />
+      <Checkbox
+        defaultChecked
+        inputProps={{ 'aria-label': 'custom' }}
         sx={{
           color: green[800],
           '&.Mui-checked': {

diff --git a/docs/src/pages/components/checkboxes/ControlledCheckbox.js b/docs/src/pages/components/checkboxes/ControlledCheckbox.js
@@ -12,7 +12,7 @@ export default function ControlledCheckbox() {
     <Checkbox
       checked={checked}
       onChange={handleChange}
-      inputProps={{ 'aria-label': 'controlled checkbox' }}
+      inputProps={{ 'aria-label': 'controlled' }}
     />
   );
 }
diff --git a/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx b/docs/src/pages/components/checkboxes/ControlledCheckbox.tsx
@@ -12,7 +12,7 @@ export default function ControlledCheckbox() {
     <Checkbox
       checked={checked}
       onChange={handleChange}
-      inputProps={{ 'aria-label': 'controlled checkbox' }}
+      inputProps={{ 'aria-label': 'controlled' }}
     />
   );
 }
diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.js b/docs/src/pages/components/checkboxes/FormControlLabelPosition.js
@@ -8,7 +8,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 export default function FormControlLabelPosition() {
   return (
     <FormControl component="fieldset">
-      <FormLabel component="legend">Label Placement</FormLabel>
+      <FormLabel component="legend">Label placement</FormLabel>
       <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"

diff --git a/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx b/docs/src/pages/components/checkboxes/FormControlLabelPosition.tsx
@@ -8,7 +8,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 export default function FormControlLabelPosition() {
   return (
     <FormControl component="fieldset">
-      <FormLabel component="legend">Label Placement</FormLabel>
+      <FormLabel component="legend">Label placement</FormLabel>
       <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"

diff --git a/docs/src/pages/components/checkboxes/IconCheckboxes.js b/docs/src/pages/components/checkboxes/IconCheckboxes.js
@@ -11,14 +11,12 @@ export default function IconCheckboxes() {
       <Checkbox
         icon={<FavoriteBorder />}
         checkedIcon={<Favorite />}
-        name="checkedA"
-        inputProps={{ 'aria-label': 'favorite checkbox' }}
+        inputProps={{ 'aria-label': 'favorite' }}
       />
       <Checkbox
         icon={<BookmarkBorderIcon />}
         checkedIcon={<BookmarkIcon />}
-        name="checkedB"
-        inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+        inputProps={{ 'aria-label': 'bookmarked' }}
       />
     </div>
   );

diff --git a/docs/src/pages/components/checkboxes/IconCheckboxes.tsx b/docs/src/pages/components/checkboxes/IconCheckboxes.tsx
@@ -11,14 +11,12 @@ export default function IconCheckboxes() {
       <Checkbox
         icon={<FavoriteBorder />}
         checkedIcon={<Favorite />}
-        name="checkedA"
-        inputProps={{ 'aria-label': 'favorite checkbox' }}
+        inputProps={{ 'aria-label': 'favorite' }}
       />
       <Checkbox
         icon={<BookmarkBorderIcon />}
         checkedIcon={<BookmarkIcon />}
-        name="checkedB"
-        inputProps={{ 'aria-label': 'bookmarked checkbox' }}
+        inputProps={{ 'aria-label': 'bookmarked' }}
       />
     </div>
   );

diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.js b/docs/src/pages/components/checkboxes/SizeCheckboxes.js
@@ -4,15 +4,11 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function SizeCheckboxes() {
   return (
     <div>
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'small' }} size="small" />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal' }} />
       <Checkbox
         defaultChecked
-        inputProps={{ 'aria-label': 'small checkbox' }}
-        size="small"
-      />
-      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal checkbox' }} />
-      <Checkbox
-        defaultChecked
-        inputProps={{ 'aria-label': 'large checkbox' }}
+        inputProps={{ 'aria-label': 'large' }}
         sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
       />
     </div>

diff --git a/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx b/docs/src/pages/components/checkboxes/SizeCheckboxes.tsx
@@ -4,15 +4,11 @@ import Checkbox from '@material-ui/core/Checkbox';
 export default function SizeCheckboxes() {
   return (
     <div>
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'small' }} size="small" />
+      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal' }} />
       <Checkbox
         defaultChecked
-        inputProps={{ 'aria-label': 'small checkbox' }}
-        size="small"
-      />
-      <Checkbox defaultChecked inputProps={{ 'aria-label': 'normal checkbox' }} />
-      <Checkbox
-        defaultChecked
-        inputProps={{ 'aria-label': 'large checkbox' }}
+        inputProps={{ 'aria-label': 'large' }}
         sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
       />
     </div>

diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md
@@ -76,7 +76,7 @@ You can change the placement of the label:
 Here is an example of customizing the component. You can learn more about this in the
 [overrides documentation page](/customization/how-to-customize/).
 
-{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js", "defaultCodeOpen": false}}
+{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js"}}
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/checkbox).
 

diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md
@@ -29,7 +29,7 @@ To lay out the buttons horizontally, set the `row` prop:
 
 {{"demo": "pages/components/radio-buttons/RowRadioButtonsGroup.js"}}
 
-### Controllable
+### Controlled
 
 You can control the radio with the `value` and `onChange` props:
 

diff --git a/docs/src/pages/components/switches/BasicSwitches.js b/docs/src/pages/components/switches/BasicSwitches.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Switch from '@material-ui/core/Switch';
+
+export default function BasicSwitches() {
+  return (
+    <div>
+      <Switch defaultChecked inputProps={{ 'aria-label': 'checked' }} />
+      <Switch inputProps={{ 'aria-label': 'unchecked' }} />
+      <Switch
+        disabled
+        defaultChecked
+        inputProps={{ 'aria-label': 'disabled checked' }}
+      />
+      <Switch disabled inputProps={{ 'aria-label': 'disabled unchecked' }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/switches/BasicSwitches.tsx b/docs/src/pages/components/switches/BasicSwitches.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Switch from '@material-ui/core/Switch';
+
+export default function BasicSwitches() {
+  return (
+    <div>
+      <Switch defaultChecked inputProps={{ 'aria-label': 'checked' }} />
+      <Switch inputProps={{ 'aria-label': 'unchecked' }} />
+      <Switch
+        disabled
+        defaultChecked
+        inputProps={{ 'aria-label': 'disabled checked' }}
+      />
+      <Switch disabled inputProps={{ 'aria-label': 'disabled unchecked' }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import Switch from '@material-ui/core/Switch';
+
+const GreenSwitch = styled(Switch)(({ theme }) => ({
+  '& .MuiSwitch-input.Mui-checked': {
+    color: green[600],
+    '&:hover': {
+      backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
+    },
+  },
+  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: green[600],
+  },
+}));
+
+export default function ColorSwitches() {
+  return (
+    <div>
+      <Switch defaultChecked inputProps={{ 'aria-label': 'secondary' }} />
+      <Switch
+        defaultChecked
+        color="primary"
+        inputProps={{ 'aria-label': 'primary' }}
+      />
+      <Switch
+        defaultChecked
+        color="default"
+        inputProps={{ 'aria-label': 'default' }}
+      />
+      <GreenSwitch defaultChecked inputProps={{ 'aria-label': 'custom' }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import Switch from '@material-ui/core/Switch';
+
+const GreenSwitch = styled(Switch)(({ theme }) => ({
+  '& .MuiSwitch-input.Mui-checked': {
+    color: green[600],
+    '&:hover': {
+      backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
+    },
+  },
+  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: green[600],
+  },
+}));
+
+export default function ColorSwitches() {
+  return (
+    <div>
+      <Switch defaultChecked inputProps={{ 'aria-label': 'secondary' }} />
+      <Switch
+        defaultChecked
+        color="primary"
+        inputProps={{ 'aria-label': 'primary' }}
+      />
+      <Switch
+        defaultChecked
+        color="default"
+        inputProps={{ 'aria-label': 'default' }}
+      />
+      <GreenSwitch defaultChecked inputProps={{ 'aria-label': 'custom' }} />
+    </div>
+  );
+}