diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js
new file mode 100644
index 00000000000000..4358d103c87113
--- /dev/null
+++ b/docs/src/pages/components/text-fields/ColorTextFields.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& > *': {
+      width: 200,
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function ColorTextField() {
+  const classes = useStyles();
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <TextField id="standard-secondary" label="Standard secondary" color="secondary" />
+      <TextField
+        id="filled-secondary"
+        label="Filled secondary"
+        variant="filled"
+        color="secondary"
+      />
+      <TextField
+        id="outlined-secondary"
+        label="Outlined secondary"
+        variant="outlined"
+        color="secondary"
+      />
+    </form>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx
new file mode 100644
index 00000000000000..8f1026754ed55a
--- /dev/null
+++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      '& > *': {
+        width: 200,
+        margin: theme.spacing(1),
+      },
+    },
+  }),
+);
+
+export default function ColorTextField() {
+  const classes = useStyles();
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <TextField id="standard-secondary" label="Standard secondary" color="secondary" />
+      <TextField
+        id="filled-secondary"
+        label="Filled secondary"
+        variant="filled"
+        color="secondary"
+      />
+      <TextField
+        id="outlined-secondary"
+        label="Outlined secondary"
+        variant="outlined"
+        color="secondary"
+      />
+    </form>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
index 6b9d20f97f4f71..07464957eac2b3 100644
--- a/docs/src/pages/components/text-fields/text-fields.md
+++ b/docs/src/pages/components/text-fields/text-fields.md
@@ -45,7 +45,7 @@ The `select` prop makes the text field use the [Select](/components/selects/) co
 
 ## Icons
 
-There are multiple ways to display an icon with a text field. 
+There are multiple ways to display an icon with a text field.
 
 {{"demo": "pages/components/text-fields/InputWithIcon.js"}}
 
@@ -94,6 +94,12 @@ The component takes care of the most used properties, then it's up to the user t
 
 {{"demo": "pages/components/text-fields/Inputs.js"}}
 
+## Color
+
+The `color` prop changes the highlight color of the text field when focused.
+
+{{"demo": "pages/components/text-fields/ColorTextFields.js"}}
+
 ## Customized inputs
 
 Here are some examples of customizing the component. You can learn more about this in the