title: react-hook-form Limiting Length and Type using Material UI Text Field
body: <p>Given the code below, I am unable to limit the number of digits a user can enter into a text field and control the type of input.</p>
  <p><strong>If</strong> I remove <code>type: &quot;number&quot;</code> then the input length <strong>can</strong> be controlled but letters can now be entered.</p>
  <p><strong>If</strong> I remove <code>maxLength: 4</code> then the input length <strong>can't</strong> be controlled but letters are no longer allowed.</p>
  <p><strong>If</strong> I set <code>inputProps={{ maxLength: 4, type: &quot;number&quot; }}</code> as seen below, only the <code>type: &quot;number&quot;</code> input constraint is being enforced.</p>
  <p>What can I do to fix this?</p>
  <pre><code>import React from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      &quot;&amp; &gt; *&quot;: {
        margin: theme.spacing(1),
        width: &quot;25ch&quot;
      }
    }
  }));
  
  export default function BasicTextFields() {
    const classes = useStyles();
  
    return (
      &lt;form className={classes.root} noValidate autoComplete=&quot;off&quot;&gt;
        &lt;TextField
          id=&quot;outlined-basic&quot;
          label=&quot;Outlined&quot;
          variant=&quot;outlined&quot;
          inputProps={{ maxLength: 4, type: &quot;number&quot; }}
        /&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>