How to set character limit on mui textfield in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To set character limit on mui textfield, set inputProps={{ maxLength: 10 }}.The maxLength attribute defines the maximum number of characters the user can enter into an input field or a textarea element.

Today, I am going to show you, how to set character limit on mui textfield in React js mui textfield.

Installation

Install the following packages to use mui textfield in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material textfield set character limit example.

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();
  return (
    <Box component="form">
      <TextField
        type="text"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => setNum(e.target.value)}
        value={num}
        inputProps={{ maxLength: 10 }}
      />
    </Box>
  );
}

In the above code example, I have used the @mui/material TextField component and set the character limit of MUI Textfield.

Check the output of the above code example.

All the best 👍