diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js
index 5ceb21e98a351e..c4c09e2a673b2d 100644
--- a/docs/src/pages/components/text-fields/BasicTextFields.js
+++ b/docs/src/pages/components/text-fields/BasicTextFields.js
@@ -16,9 +16,9 @@ export default function BasicTextFields() {
 
   return (
     <form className={classes.root} noValidate autoComplete="off">
-      <TextField id="standard-basic" label="Standard" variant="standard" />
-      <TextField id="filled-basic" label="Filled" variant="filled" />
       <TextField id="outlined-basic" label="Outlined" />
+      <TextField id="filled-basic" label="Filled" variant="filled" />
+      <TextField id="standard-basic" label="Standard" variant="standard" />
     </form>
   );
 }
diff --git a/docs/src/pages/components/text-fields/BasicTextFields.tsx b/docs/src/pages/components/text-fields/BasicTextFields.tsx
index 0b29374136e30c..b422e73c891c14 100644
--- a/docs/src/pages/components/text-fields/BasicTextFields.tsx
+++ b/docs/src/pages/components/text-fields/BasicTextFields.tsx
@@ -18,9 +18,9 @@ export default function BasicTextFields() {
 
   return (
     <form className={classes.root} noValidate autoComplete="off">
-      <TextField id="standard-basic" label="Standard" variant="standard" />
-      <TextField id="filled-basic" label="Filled" variant="filled" />
       <TextField id="outlined-basic" label="Outlined" />
+      <TextField id="filled-basic" label="Filled" variant="filled" />
+      <TextField id="standard-basic" label="Standard" variant="standard" />
     </form>
   );
 }
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js
index fbfee32da37c46..9eb29fa9accbcc 100644
--- a/docs/src/pages/components/text-fields/ColorTextFields.js
+++ b/docs/src/pages/components/text-fields/ColorTextFields.js
@@ -17,10 +17,9 @@ export default function ColorTextFields() {
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <TextField
-        id="standard-secondary"
-        label="Standard secondary"
+        id="outlined-secondary"
+        label="Outlined secondary"
         color="secondary"
-        variant="standard"
       />
       <TextField
         id="filled-secondary"
@@ -29,9 +28,10 @@ export default function ColorTextFields() {
         color="secondary"
       />
       <TextField
-        id="outlined-secondary"
-        label="Outlined secondary"
+        id="standard-secondary"
+        label="Standard secondary"
         color="secondary"
+        variant="standard"
       />
     </form>
   );
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx
index 57cc9c40ce879c..5d9c052ad483fd 100644
--- a/docs/src/pages/components/text-fields/ColorTextFields.tsx
+++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx
@@ -19,10 +19,9 @@ export default function ColorTextFields() {
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <TextField
-        id="standard-secondary"
-        label="Standard secondary"
+        id="outlined-secondary"
+        label="Outlined secondary"
         color="secondary"
-        variant="standard"
       />
       <TextField
         id="filled-secondary"
@@ -31,9 +30,10 @@ export default function ColorTextFields() {
         color="secondary"
       />
       <TextField
-        id="outlined-secondary"
-        label="Outlined secondary"
+        id="standard-secondary"
+        label="Standard secondary"
         color="secondary"
+        variant="standard"
       />
     </form>
   );
diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js
index 5740d27d4a5a10..2f7950f1a5ca93 100644
--- a/docs/src/pages/components/text-fields/CustomizedInputs.js
+++ b/docs/src/pages/components/text-fields/CustomizedInputs.js
@@ -101,10 +101,7 @@ function RedditTextField(props) {
   const classes = useStylesReddit();
 
   return (
-    <TextField
-      InputProps={{ classes, disableUnderline: true }}
-      {...props}
-    />
+    <TextField InputProps={{ classes, disableUnderline: true }} {...props} />
   );
 }
 
@@ -194,6 +191,7 @@ export default function CustomizedInputs() {
         className={classes.margin}
         label="CSS validation style"
         required
+        variant="outlined"
         defaultValue="Success"
         id="validation-outlined-input"
       />
diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.js b/docs/src/pages/components/text-fields/FormPropsTextFields.js
index 75f6dcca16ca58..6a63fc58c9c984 100644
--- a/docs/src/pages/components/text-fields/FormPropsTextFields.js
+++ b/docs/src/pages/components/text-fields/FormPropsTextFields.js
@@ -19,55 +19,44 @@ export default function FormPropsTextFields() {
       <div>
         <TextField
           required
-          id="standard-required"
+          id="outlined-required"
           label="Required"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
           disabled
-          id="standard-disabled"
+          id="outlined-disabled"
           label="Disabled"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
-          id="standard-password-input"
+          id="outlined-password-input"
           label="Password"
           type="password"
           autoComplete="current-password"
-          variant="standard"
         />
         <TextField
-          id="standard-read-only-input"
+          id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
           InputProps={{
             readOnly: true,
           }}
-          variant="standard"
         />
         <TextField
-          id="standard-number"
+          id="outlined-number"
           label="Number"
           type="number"
           InputLabelProps={{
             shrink: true,
           }}
-          variant="standard"
-        />
-        <TextField
-          id="standard-search"
-          label="Search field"
-          type="search"
-          variant="standard"
         />
+        <TextField id="outlined-search" label="Search field" type="search" />
         <TextField
-          id="standard-helperText"
+          id="outlined-helperText"
           label="Helper text"
           defaultValue="Default Value"
           helperText="Some important text"
-          variant="standard"
         />
       </div>
       <div>
@@ -127,44 +116,55 @@ export default function FormPropsTextFields() {
       <div>
         <TextField
           required
-          id="outlined-required"
+          id="standard-required"
           label="Required"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
           disabled
-          id="outlined-disabled"
+          id="standard-disabled"
           label="Disabled"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
-          id="outlined-password-input"
+          id="standard-password-input"
           label="Password"
           type="password"
           autoComplete="current-password"
+          variant="standard"
         />
         <TextField
-          id="outlined-read-only-input"
+          id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
           InputProps={{
             readOnly: true,
           }}
+          variant="standard"
         />
         <TextField
-          id="outlined-number"
+          id="standard-number"
           label="Number"
           type="number"
           InputLabelProps={{
             shrink: true,
           }}
+          variant="standard"
         />
-        <TextField id="outlined-search" label="Search field" type="search" />
         <TextField
-          id="outlined-helperText"
+          id="standard-search"
+          label="Search field"
+          type="search"
+          variant="standard"
+        />
+        <TextField
+          id="standard-helperText"
           label="Helper text"
           defaultValue="Default Value"
           helperText="Some important text"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
index a3e988162952b8..f8216a35d30d7a 100644
--- a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
+++ b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
@@ -21,55 +21,44 @@ export default function FormPropsTextFields() {
       <div>
         <TextField
           required
-          id="standard-required"
+          id="outlined-required"
           label="Required"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
           disabled
-          id="standard-disabled"
+          id="outlined-disabled"
           label="Disabled"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
-          id="standard-password-input"
+          id="outlined-password-input"
           label="Password"
           type="password"
           autoComplete="current-password"
-          variant="standard"
         />
         <TextField
-          id="standard-read-only-input"
+          id="outlined-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
           InputProps={{
             readOnly: true,
           }}
-          variant="standard"
         />
         <TextField
-          id="standard-number"
+          id="outlined-number"
           label="Number"
           type="number"
           InputLabelProps={{
             shrink: true,
           }}
-          variant="standard"
-        />
-        <TextField
-          id="standard-search"
-          label="Search field"
-          type="search"
-          variant="standard"
         />
+        <TextField id="outlined-search" label="Search field" type="search" />
         <TextField
-          id="standard-helperText"
+          id="outlined-helperText"
           label="Helper text"
           defaultValue="Default Value"
           helperText="Some important text"
-          variant="standard"
         />
       </div>
       <div>
@@ -129,44 +118,55 @@ export default function FormPropsTextFields() {
       <div>
         <TextField
           required
-          id="outlined-required"
+          id="standard-required"
           label="Required"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
           disabled
-          id="outlined-disabled"
+          id="standard-disabled"
           label="Disabled"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
-          id="outlined-password-input"
+          id="standard-password-input"
           label="Password"
           type="password"
           autoComplete="current-password"
+          variant="standard"
         />
         <TextField
-          id="outlined-read-only-input"
+          id="standard-read-only-input"
           label="Read Only"
           defaultValue="Hello World"
           InputProps={{
             readOnly: true,
           }}
+          variant="standard"
         />
         <TextField
-          id="outlined-number"
+          id="standard-number"
           label="Number"
           type="number"
           InputLabelProps={{
             shrink: true,
           }}
+          variant="standard"
         />
-        <TextField id="outlined-search" label="Search field" type="search" />
         <TextField
-          id="outlined-helperText"
+          id="standard-search"
+          label="Search field"
+          type="search"
+          variant="standard"
+        />
+        <TextField
+          id="standard-helperText"
           label="Helper text"
           defaultValue="Default Value"
           helperText="Some important text"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
index e4132d121ecbb9..d5f3dde070b0ca 100644
--- a/docs/src/pages/components/text-fields/InputAdornments.js
+++ b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -59,42 +59,42 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="standard-start-adornment"
+          id="outlined-start-adornment"
           className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">Kg</InputAdornment>
             ),
           }}
-          variant="standard"
         />
         <FormControl
-          className={clsx(
-            classes.margin,
-            classes.withoutLabel,
-            classes.textField,
-          )}
+          className={clsx(classes.margin, classes.textField)}
+          variant="outlined"
         >
-          <Input
-            id="standard-adornment-weight"
+          <OutlinedInput
+            id="outlined-adornment-weight"
             value={values.weight}
             onChange={handleChange('weight')}
             endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
-            aria-describedby="standard-weight-helper-text"
+            aria-describedby="outlined-weight-helper-text"
             inputProps={{
               'aria-label': 'weight',
             }}
+            labelWidth={0}
           />
-          <FormHelperText id="standard-weight-helper-text">
+          <FormHelperText id="outlined-weight-helper-text">
             Weight
           </FormHelperText>
         </FormControl>
-        <FormControl className={clsx(classes.margin, classes.textField)}>
-          <InputLabel htmlFor="standard-adornment-password">
+        <FormControl
+          className={clsx(classes.margin, classes.textField)}
+          variant="outlined"
+        >
+          <InputLabel htmlFor="outlined-adornment-password">
             Password
           </InputLabel>
-          <Input
-            id="standard-adornment-password"
+          <OutlinedInput
+            id="outlined-adornment-password"
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
@@ -104,20 +104,23 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
             }
+            labelWidth={70}
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin}>
-          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
-          <Input
-            id="standard-adornment-amount"
+        <FormControl fullWidth className={classes.margin} variant="outlined">
+          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
+          <OutlinedInput
+            id="outlined-adornment-amount"
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
+            labelWidth={60}
           />
         </FormControl>
       </div>
@@ -186,42 +189,42 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="outlined-start-adornment"
+          id="standard-start-adornment"
           className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">Kg</InputAdornment>
             ),
           }}
+          variant="standard"
         />
         <FormControl
-          className={clsx(classes.margin, classes.textField)}
-          variant="outlined"
+          className={clsx(
+            classes.margin,
+            classes.withoutLabel,
+            classes.textField,
+          )}
         >
-          <OutlinedInput
-            id="outlined-adornment-weight"
+          <Input
+            id="standard-adornment-weight"
             value={values.weight}
             onChange={handleChange('weight')}
             endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
-            aria-describedby="outlined-weight-helper-text"
+            aria-describedby="standard-weight-helper-text"
             inputProps={{
               'aria-label': 'weight',
             }}
-            labelWidth={0}
           />
-          <FormHelperText id="outlined-weight-helper-text">
+          <FormHelperText id="standard-weight-helper-text">
             Weight
           </FormHelperText>
         </FormControl>
-        <FormControl
-          className={clsx(classes.margin, classes.textField)}
-          variant="outlined"
-        >
-          <InputLabel htmlFor="outlined-adornment-password">
+        <FormControl className={clsx(classes.margin, classes.textField)}>
+          <InputLabel htmlFor="standard-adornment-password">
             Password
           </InputLabel>
-          <OutlinedInput
-            id="outlined-adornment-password"
+          <Input
+            id="standard-adornment-password"
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
@@ -231,23 +234,20 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
-                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
             }
-            labelWidth={70}
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin} variant="outlined">
-          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
-          <OutlinedInput
-            id="outlined-adornment-amount"
+        <FormControl fullWidth className={classes.margin}>
+          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
+          <Input
+            id="standard-adornment-amount"
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
-            labelWidth={60}
           />
         </FormControl>
       </div>
diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx
index d49146bbb697ed..13221a94b869ed 100644
--- a/docs/src/pages/components/text-fields/InputAdornments.tsx
+++ b/docs/src/pages/components/text-fields/InputAdornments.tsx
@@ -73,42 +73,42 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="standard-start-adornment"
+          id="outlined-start-adornment"
           className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">Kg</InputAdornment>
             ),
           }}
-          variant="standard"
         />
         <FormControl
-          className={clsx(
-            classes.margin,
-            classes.withoutLabel,
-            classes.textField,
-          )}
+          className={clsx(classes.margin, classes.textField)}
+          variant="outlined"
         >
-          <Input
-            id="standard-adornment-weight"
+          <OutlinedInput
+            id="outlined-adornment-weight"
             value={values.weight}
             onChange={handleChange('weight')}
             endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
-            aria-describedby="standard-weight-helper-text"
+            aria-describedby="outlined-weight-helper-text"
             inputProps={{
               'aria-label': 'weight',
             }}
+            labelWidth={0}
           />
-          <FormHelperText id="standard-weight-helper-text">
+          <FormHelperText id="outlined-weight-helper-text">
             Weight
           </FormHelperText>
         </FormControl>
-        <FormControl className={clsx(classes.margin, classes.textField)}>
-          <InputLabel htmlFor="standard-adornment-password">
+        <FormControl
+          className={clsx(classes.margin, classes.textField)}
+          variant="outlined"
+        >
+          <InputLabel htmlFor="outlined-adornment-password">
             Password
           </InputLabel>
-          <Input
-            id="standard-adornment-password"
+          <OutlinedInput
+            id="outlined-adornment-password"
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
@@ -118,20 +118,23 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
             }
+            labelWidth={70}
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin}>
-          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
-          <Input
-            id="standard-adornment-amount"
+        <FormControl fullWidth className={classes.margin} variant="outlined">
+          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
+          <OutlinedInput
+            id="outlined-adornment-amount"
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
+            labelWidth={60}
           />
         </FormControl>
       </div>
@@ -200,42 +203,42 @@ export default function InputAdornments() {
       <div>
         <TextField
           label="With normal TextField"
-          id="outlined-start-adornment"
+          id="standard-start-adornment"
           className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">Kg</InputAdornment>
             ),
           }}
+          variant="standard"
         />
         <FormControl
-          className={clsx(classes.margin, classes.textField)}
-          variant="outlined"
+          className={clsx(
+            classes.margin,
+            classes.withoutLabel,
+            classes.textField,
+          )}
         >
-          <OutlinedInput
-            id="outlined-adornment-weight"
+          <Input
+            id="standard-adornment-weight"
             value={values.weight}
             onChange={handleChange('weight')}
             endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
-            aria-describedby="outlined-weight-helper-text"
+            aria-describedby="standard-weight-helper-text"
             inputProps={{
               'aria-label': 'weight',
             }}
-            labelWidth={0}
           />
-          <FormHelperText id="outlined-weight-helper-text">
+          <FormHelperText id="standard-weight-helper-text">
             Weight
           </FormHelperText>
         </FormControl>
-        <FormControl
-          className={clsx(classes.margin, classes.textField)}
-          variant="outlined"
-        >
-          <InputLabel htmlFor="outlined-adornment-password">
+        <FormControl className={clsx(classes.margin, classes.textField)}>
+          <InputLabel htmlFor="standard-adornment-password">
             Password
           </InputLabel>
-          <OutlinedInput
-            id="outlined-adornment-password"
+          <Input
+            id="standard-adornment-password"
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
@@ -245,23 +248,20 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
-                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
             }
-            labelWidth={70}
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin} variant="outlined">
-          <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
-          <OutlinedInput
-            id="outlined-adornment-amount"
+        <FormControl fullWidth className={classes.margin}>
+          <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
+          <Input
+            id="standard-adornment-amount"
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
-            labelWidth={60}
           />
         </FormControl>
       </div>
diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.js b/docs/src/pages/components/text-fields/LayoutTextFields.js
index f75acd2efda761..fbf0eab9f635a7 100644
--- a/docs/src/pages/components/text-fields/LayoutTextFields.js
+++ b/docs/src/pages/components/text-fields/LayoutTextFields.js
@@ -21,7 +21,7 @@ export default function LayoutTextFields() {
     <div className={classes.root}>
       <div>
         <TextField
-          id="standard-full-width"
+          id="outlined-full-width"
           label="Label"
           style={{ margin: 8 }}
           placeholder="Placeholder"
@@ -31,33 +31,29 @@ export default function LayoutTextFields() {
           InputLabelProps={{
             shrink: true,
           }}
-          variant="standard"
         />
         <TextField
           label="None"
-          id="margin-none"
+          id="outlined-margin-none"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
-          variant="standard"
         />
         <TextField
           label="Dense"
-          id="margin-dense"
+          id="outlined-margin-dense"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="dense"
-          variant="standard"
         />
         <TextField
           label="Normal"
-          id="margin-normal"
+          id="outlined-margin-normal"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="normal"
-          variant="standard"
         />
       </div>
       <div>
@@ -103,7 +99,7 @@ export default function LayoutTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-full-width"
+          id="standard-full-width"
           label="Label"
           style={{ margin: 8 }}
           placeholder="Placeholder"
@@ -113,29 +109,33 @@ export default function LayoutTextFields() {
           InputLabelProps={{
             shrink: true,
           }}
+          variant="standard"
         />
         <TextField
           label="None"
-          id="outlined-margin-none"
+          id="margin-none"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
+          variant="standard"
         />
         <TextField
           label="Dense"
-          id="outlined-margin-dense"
+          id="margin-dense"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="dense"
+          variant="standard"
         />
         <TextField
           label="Normal"
-          id="outlined-margin-normal"
+          id="margin-normal"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="normal"
+          variant="standard"
         />
       </div>
     </div>
diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.tsx b/docs/src/pages/components/text-fields/LayoutTextFields.tsx
index 0af99c8c9cf071..13cef77d0cea6c 100644
--- a/docs/src/pages/components/text-fields/LayoutTextFields.tsx
+++ b/docs/src/pages/components/text-fields/LayoutTextFields.tsx
@@ -23,7 +23,7 @@ export default function LayoutTextFields() {
     <div className={classes.root}>
       <div>
         <TextField
-          id="standard-full-width"
+          id="outlined-full-width"
           label="Label"
           style={{ margin: 8 }}
           placeholder="Placeholder"
@@ -33,33 +33,29 @@ export default function LayoutTextFields() {
           InputLabelProps={{
             shrink: true,
           }}
-          variant="standard"
         />
         <TextField
           label="None"
-          id="margin-none"
+          id="outlined-margin-none"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
-          variant="standard"
         />
         <TextField
           label="Dense"
-          id="margin-dense"
+          id="outlined-margin-dense"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="dense"
-          variant="standard"
         />
         <TextField
           label="Normal"
-          id="margin-normal"
+          id="outlined-margin-normal"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="normal"
-          variant="standard"
         />
       </div>
       <div>
@@ -105,7 +101,7 @@ export default function LayoutTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-full-width"
+          id="standard-full-width"
           label="Label"
           style={{ margin: 8 }}
           placeholder="Placeholder"
@@ -115,29 +111,33 @@ export default function LayoutTextFields() {
           InputLabelProps={{
             shrink: true,
           }}
+          variant="standard"
         />
         <TextField
           label="None"
-          id="outlined-margin-none"
+          id="margin-none"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
+          variant="standard"
         />
         <TextField
           label="Dense"
-          id="outlined-margin-dense"
+          id="margin-dense"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="dense"
+          variant="standard"
         />
         <TextField
           label="Normal"
-          id="outlined-margin-normal"
+          id="margin-normal"
           defaultValue="Default Value"
           className={classes.textField}
           helperText="Some important text"
           margin="normal"
+          variant="standard"
         />
       </div>
     </div>
diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js
index da322fbe327646..c102dd58b066f1 100644
--- a/docs/src/pages/components/text-fields/MultilineTextFields.js
+++ b/docs/src/pages/components/text-fields/MultilineTextFields.js
@@ -23,28 +23,25 @@ export default function MultilineTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-multiline-flexible"
+          id="outlined-multiline-flexible"
           label="Multiline"
           multiline
           maxRows={4}
           value={value}
           onChange={handleChange}
-          variant="standard"
         />
         <TextField
-          id="standard-textarea"
+          id="outlined-textarea"
           label="Multiline Placeholder"
           placeholder="Placeholder"
           multiline
-          variant="standard"
         />
         <TextField
-          id="standard-multiline-static"
+          id="outlined-multiline-static"
           label="Multiline"
           multiline
           rows={4}
           defaultValue="Default Value"
-          variant="standard"
         />
       </div>
       <div>
@@ -75,25 +72,28 @@ export default function MultilineTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-multiline-flexible"
+          id="standard-multiline-flexible"
           label="Multiline"
           multiline
           maxRows={4}
           value={value}
           onChange={handleChange}
+          variant="standard"
         />
         <TextField
-          id="outlined-textarea"
+          id="standard-textarea"
           label="Multiline Placeholder"
           placeholder="Placeholder"
           multiline
+          variant="standard"
         />
         <TextField
-          id="outlined-multiline-static"
+          id="standard-multiline-static"
           label="Multiline"
           multiline
           rows={4}
           defaultValue="Default Value"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.tsx b/docs/src/pages/components/text-fields/MultilineTextFields.tsx
index 648f9c4ae14214..4fcbf085c4ad5b 100644
--- a/docs/src/pages/components/text-fields/MultilineTextFields.tsx
+++ b/docs/src/pages/components/text-fields/MultilineTextFields.tsx
@@ -25,28 +25,25 @@ export default function MultilineTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-multiline-flexible"
+          id="outlined-multiline-flexible"
           label="Multiline"
           multiline
           maxRows={4}
           value={value}
           onChange={handleChange}
-          variant="standard"
         />
         <TextField
-          id="standard-textarea"
+          id="outlined-textarea"
           label="Multiline Placeholder"
           placeholder="Placeholder"
           multiline
-          variant="standard"
         />
         <TextField
-          id="standard-multiline-static"
+          id="outlined-multiline-static"
           label="Multiline"
           multiline
           rows={4}
           defaultValue="Default Value"
-          variant="standard"
         />
       </div>
       <div>
@@ -77,25 +74,28 @@ export default function MultilineTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-multiline-flexible"
+          id="standard-multiline-flexible"
           label="Multiline"
           multiline
           maxRows={4}
           value={value}
           onChange={handleChange}
+          variant="standard"
         />
         <TextField
-          id="outlined-textarea"
+          id="standard-textarea"
           label="Multiline Placeholder"
           placeholder="Placeholder"
           multiline
+          variant="standard"
         />
         <TextField
-          id="outlined-multiline-static"
+          id="standard-multiline-static"
           label="Multiline"
           multiline
           rows={4}
           defaultValue="Default Value"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/SelectTextFields.js b/docs/src/pages/components/text-fields/SelectTextFields.js
index 9dfc8b871f9c24..2076251cec879e 100644
--- a/docs/src/pages/components/text-fields/SelectTextFields.js
+++ b/docs/src/pages/components/text-fields/SelectTextFields.js
@@ -43,13 +43,12 @@ export default function MultilineTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-select-currency"
+          id="outlined-select-currency"
           select
           label="Select"
           value={currency}
           onChange={handleChange}
           helperText="Please select your currency"
-          variant="standard"
         >
           {currencies.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -58,7 +57,7 @@ export default function MultilineTextFields() {
           ))}
         </TextField>
         <TextField
-          id="standard-select-currency-native"
+          id="outlined-select-currency-native"
           select
           label="Native select"
           value={currency}
@@ -67,7 +66,6 @@ export default function MultilineTextFields() {
             native: true,
           }}
           helperText="Please select your currency"
-          variant="standard"
         >
           {currencies.map((option) => (
             <option key={option.value} value={option.value}>
@@ -113,12 +111,13 @@ export default function MultilineTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-select-currency"
+          id="standard-select-currency"
           select
           label="Select"
           value={currency}
           onChange={handleChange}
           helperText="Please select your currency"
+          variant="standard"
         >
           {currencies.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -127,7 +126,7 @@ export default function MultilineTextFields() {
           ))}
         </TextField>
         <TextField
-          id="outlined-select-currency-native"
+          id="standard-select-currency-native"
           select
           label="Native select"
           value={currency}
@@ -136,6 +135,7 @@ export default function MultilineTextFields() {
             native: true,
           }}
           helperText="Please select your currency"
+          variant="standard"
         >
           {currencies.map((option) => (
             <option key={option.value} value={option.value}>
diff --git a/docs/src/pages/components/text-fields/SelectTextFields.tsx b/docs/src/pages/components/text-fields/SelectTextFields.tsx
index c26c508a6f7ce9..124b6085cf8207 100644
--- a/docs/src/pages/components/text-fields/SelectTextFields.tsx
+++ b/docs/src/pages/components/text-fields/SelectTextFields.tsx
@@ -45,13 +45,12 @@ export default function MultilineTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-select-currency"
+          id="outlined-select-currency"
           select
           label="Select"
           value={currency}
           onChange={handleChange}
           helperText="Please select your currency"
-          variant="standard"
         >
           {currencies.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -60,7 +59,7 @@ export default function MultilineTextFields() {
           ))}
         </TextField>
         <TextField
-          id="standard-select-currency-native"
+          id="outlined-select-currency-native"
           select
           label="Native select"
           value={currency}
@@ -69,7 +68,6 @@ export default function MultilineTextFields() {
             native: true,
           }}
           helperText="Please select your currency"
-          variant="standard"
         >
           {currencies.map((option) => (
             <option key={option.value} value={option.value}>
@@ -115,12 +113,13 @@ export default function MultilineTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-select-currency"
+          id="standard-select-currency"
           select
           label="Select"
           value={currency}
           onChange={handleChange}
           helperText="Please select your currency"
+          variant="standard"
         >
           {currencies.map((option) => (
             <MenuItem key={option.value} value={option.value}>
@@ -129,7 +128,7 @@ export default function MultilineTextFields() {
           ))}
         </TextField>
         <TextField
-          id="outlined-select-currency-native"
+          id="standard-select-currency-native"
           select
           label="Native select"
           value={currency}
@@ -138,6 +137,7 @@ export default function MultilineTextFields() {
             native: true,
           }}
           helperText="Please select your currency"
+          variant="standard"
         >
           {currencies.map((option) => (
             <option key={option.value} value={option.value}>
diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js
index b54d588e0e54da..335fd9cf77e902 100644
--- a/docs/src/pages/components/text-fields/StateTextFields.js
+++ b/docs/src/pages/components/text-fields/StateTextFields.js
@@ -22,17 +22,15 @@ export default function StateTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-name"
+          id="outlined-name"
           label="Name"
           value={name}
           onChange={handleChange}
-          variant="standard"
         />
         <TextField
-          id="standard-uncontrolled"
+          id="outlined-uncontrolled"
           label="Uncontrolled"
           defaultValue="foo"
-          variant="standard"
         />
       </div>
       <div>
@@ -52,15 +50,17 @@ export default function StateTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-name"
+          id="standard-name"
           label="Name"
           value={name}
           onChange={handleChange}
+          variant="standard"
         />
         <TextField
-          id="outlined-uncontrolled"
+          id="standard-uncontrolled"
           label="Uncontrolled"
           defaultValue="foo"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/StateTextFields.tsx b/docs/src/pages/components/text-fields/StateTextFields.tsx
index 67f4220ca7612c..9b7c69e1294df1 100644
--- a/docs/src/pages/components/text-fields/StateTextFields.tsx
+++ b/docs/src/pages/components/text-fields/StateTextFields.tsx
@@ -24,17 +24,15 @@ export default function StateTextFields() {
     <form className={classes.root} noValidate autoComplete="off">
       <div>
         <TextField
-          id="standard-name"
+          id="outlined-name"
           label="Name"
           value={name}
           onChange={handleChange}
-          variant="standard"
         />
         <TextField
-          id="standard-uncontrolled"
+          id="outlined-uncontrolled"
           label="Uncontrolled"
           defaultValue="foo"
-          variant="standard"
         />
       </div>
       <div>
@@ -54,15 +52,17 @@ export default function StateTextFields() {
       </div>
       <div>
         <TextField
-          id="outlined-name"
+          id="standard-name"
           label="Name"
           value={name}
           onChange={handleChange}
+          variant="standard"
         />
         <TextField
-          id="outlined-uncontrolled"
+          id="standard-uncontrolled"
           label="Uncontrolled"
           defaultValue="foo"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/TextFieldSizes.js b/docs/src/pages/components/text-fields/TextFieldSizes.js
index aeb1316fe6162f..2af92145c98186 100644
--- a/docs/src/pages/components/text-fields/TextFieldSizes.js
+++ b/docs/src/pages/components/text-fields/TextFieldSizes.js
@@ -19,16 +19,14 @@ export default function TextFieldSizes() {
       <div>
         <TextField
           label="Size"
-          id="standard-size-small"
+          id="outlined-size-small"
           defaultValue="Small"
           size="small"
-          variant="standard"
         />
         <TextField
           label="Size"
-          id="standard-size-normal"
+          id="outlined-size-normal"
           defaultValue="Normal"
-          variant="standard"
         />
       </div>
       <div>
@@ -49,14 +47,16 @@ export default function TextFieldSizes() {
       <div>
         <TextField
           label="Size"
-          id="outlined-size-small"
+          id="standard-size-small"
           defaultValue="Small"
           size="small"
+          variant="standard"
         />
         <TextField
           label="Size"
-          id="outlined-size-normal"
+          id="standard-size-normal"
           defaultValue="Normal"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/TextFieldSizes.tsx b/docs/src/pages/components/text-fields/TextFieldSizes.tsx
index 843b25d757c046..9f3d7c164f8fba 100644
--- a/docs/src/pages/components/text-fields/TextFieldSizes.tsx
+++ b/docs/src/pages/components/text-fields/TextFieldSizes.tsx
@@ -21,16 +21,14 @@ export default function TextFieldSizes() {
       <div>
         <TextField
           label="Size"
-          id="standard-size-small"
+          id="outlined-size-small"
           defaultValue="Small"
           size="small"
-          variant="standard"
         />
         <TextField
           label="Size"
-          id="standard-size-normal"
+          id="outlined-size-normal"
           defaultValue="Normal"
-          variant="standard"
         />
       </div>
       <div>
@@ -51,14 +49,16 @@ export default function TextFieldSizes() {
       <div>
         <TextField
           label="Size"
-          id="outlined-size-small"
+          id="standard-size-small"
           defaultValue="Small"
           size="small"
+          variant="standard"
         />
         <TextField
           label="Size"
-          id="outlined-size-normal"
+          id="standard-size-normal"
           defaultValue="Normal"
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.js b/docs/src/pages/components/text-fields/ValidationTextFields.js
index cc2b4b3469ccb7..91d409762c758c 100644
--- a/docs/src/pages/components/text-fields/ValidationTextFields.js
+++ b/docs/src/pages/components/text-fields/ValidationTextFields.js
@@ -19,18 +19,16 @@ export default function ValidationTextFields() {
       <div>
         <TextField
           error
-          id="standard-error"
+          id="outlined-error"
           label="Error"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
           error
-          id="standard-error-helper-text"
+          id="outlined-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
-          variant="standard"
         />
       </div>
       <div>
@@ -53,16 +51,18 @@ export default function ValidationTextFields() {
       <div>
         <TextField
           error
-          id="outlined-error"
+          id="standard-error"
           label="Error"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
           error
-          id="outlined-error-helper-text"
+          id="standard-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
+          variant="standard"
         />
       </div>
     </form>
diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.tsx b/docs/src/pages/components/text-fields/ValidationTextFields.tsx
index f140d709102b1d..57faf6a5f7e219 100644
--- a/docs/src/pages/components/text-fields/ValidationTextFields.tsx
+++ b/docs/src/pages/components/text-fields/ValidationTextFields.tsx
@@ -21,18 +21,16 @@ export default function ValidationTextFields() {
       <div>
         <TextField
           error
-          id="standard-error"
+          id="outlined-error"
           label="Error"
           defaultValue="Hello World"
-          variant="standard"
         />
         <TextField
           error
-          id="standard-error-helper-text"
+          id="outlined-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
-          variant="standard"
         />
       </div>
       <div>
@@ -55,16 +53,18 @@ export default function ValidationTextFields() {
       <div>
         <TextField
           error
-          id="outlined-error"
+          id="standard-error"
           label="Error"
           defaultValue="Hello World"
+          variant="standard"
         />
         <TextField
           error
-          id="outlined-error-helper-text"
+          id="standard-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
+          variant="standard"
         />
       </div>
     </form>