how to set max length in mui textfield?
July 28, 2022Hi 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.
- Set max value limit in mui textfield using
inputProps
. - 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.
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 yourlimitChar
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.
Happy Coding,
I hope the above example with help you to do your task.