how to set max length in mui textfield?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To set max length ( characters limit ) in mui text field, you can use the inputProps attribute where you can set maxLength which will restrict the user to enter more values then maxlength.

Here is a short example of using maxLength in material ui textfield.

<TextField
  type="text"
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  onChange={(e) => setNum(e.target.value)}
  value={num}
  inputProps={{ maxLength: 12 }}
/>

The maxLength only work for mui textfield type text for type number you can use our second example.

In this article, we will see two ways to limit characters in mui textfield.

1. Set max value limit in mui textfield using inputProps.
2. Limit max characters on the onChange attribute ( In case of maxLength not working for you ).

Let’s start the today’s tutorial How to set max length in mui textfield

Set max value limit in mui textfield using inputProps

In this example, we set max characters in the mui TextField type text using inputProps={{ maxLength: 12 }}.

Note: To work the maxLength prop you have to use type attribute text else use the second solution where we are using limiting characters in the onChange attribute.

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const [text, setText] = React.useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <Box component="form">
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => handleChange(e)}
        defaultValue={text}
        value={text}
        inputProps={{ maxLength: 12 }}
      />
    </Box>
  );
}

Here, we are provided code sandbox links for the above program for set maxlength in mui input. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Limit max characters on the onChange attribute

To set max length we have another option is, we will not change the state when the user reached the limit character number.

Let’s see how we can do it.

In this example, we will do the following things to limit char in mui textfield.

• create a limitChar constant and define the max value length
• create the handleChange function and call in mui textfield onChange attribute
• convert e.target.value to string if your mui textfield type number
• compare with the limitChar constant and if the length less than equal to your limitChar constant then set in the state

App.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const [num, setNum] = React.useState();
  const limitChar = 12;
  const handleChange = (e) => {
    if (e.target.value.toString().length <= limitChar) {
      setNum(e.target.value);
    }
  };

  return (
    <Box component="form">
      <TextField
        type="number"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => handleChange(e)}
        defaultValue={num}
        value={num}
      />
    </Box>
  );
}

Here, we are provided code sandbox links for the above program for set maxlength in mui input. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Happy Coding,

I hope the above example with help you to do your task.