[docs] Document TextField helperText height (mui#22146)

docs/src/pages/components/text-fields/HelperTextAligned.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextAligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField helperText=" " label="Name" />
+    </div>
+  );
+}

docs/src/pages/components/text-fields/HelperTextAligned.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextAligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField helperText=" " label="Name" />
+    </div>
+  );
+}

docs/src/pages/components/text-fields/HelperTextMisaligned.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextMisaligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField label="Name" />
+    </div>
+  );
+}

docs/src/pages/components/text-fields/HelperTextMisaligned.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextMisaligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField label="Name" />
+    </div>
+  );
+}

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

@@ -168,6 +168,16 @@ For number validation, one viable alternative is to use the default input type="
 
 In the future, we might provide a [number input component](https://github.com/mui-org/material-ui/issues/19154).
 
+### Helper text
+
+The helper text prop affects the height of the text field. If two text fields are placed side by side, one with a helper text and one without, they will have different heights. For example:
+
+{{"demo": "pages/components/text-fields/HelperTextMisaligned.js"}}
+
+This can be fixed by passing a space character to the `helperText` prop:
+
+{{"demo": "pages/components/text-fields/HelperTextAligned.js"}}
+
 ## Integration with 3rd party input libraries
 
 You can use third-party libraries to format an input.