React material ui input max length

Asked
Active3 hr before
Viewed126 times

7 Answers

reactlengthmaterialinput
90%

Hi I was wondering if there is a property to set the max length of the text-input so that when the user enters a certain amount of letters they will not be able to enter any more? thanks a lot!,Note that InputProps and inputProps are two different properties of TextField, This fact wasted a few hours of my life

Example_snippet/controller/utility/_react.js/ <TextField inputProps={{ . . .
<TextField
  inputProps={{
    maxLength: 10,
  }}
/>
load more v
88%

Instead of onChange method you can pass maxLength to the inputProps props of material-ui TextField,,Solution

Example_snippet/controller/utility/_react.js/ <TextField required id. . .
<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    inputProps={{ maxLength: 12 }}
/>
load more v
72%

I am using Material-UI with React and TypeScript,,if I use type attribute with inputProps, it does not limit max length

Example_snippet/controller/utility/_react.js/ <TextField id='user-id' la. . .
<TextField
  id='user-id'
  label='user id'
  type='number'
  required
  helperText='Required'
  inputProps={{ maxLength : 12 }}
  onChange={(e) => setUserid(Number(e.target.value))}
  variant='filled' />
load more v
65%

Search Answer Titles

Example_snippet/controller/utility/_react.js/ <Input inputProps={{ maxLengt. . .
<Input
	inputProps={{ maxLength: 10 }} // sets the maximum length to 10
></Input>
load more v
75%

MaxLength works fine for input="text" but it doesn't for input="number", I imagined that max="" would work in this case, but that didn't work either

Example_snippet/controller/utility/_length.js/ inputProps={{maxLength: 10}}. . .
inputProps = {
   {
      maxLength: 10
   }
}
40%

Example_snippet/controller/utility/_length.js/ <Input inputProps={{ maxLengt. . .
<Input
	inputProps={{ maxLength: 10 }} // sets the maximum length to 10
></Input>
load more v
22%

The API documentation of the TextField React component, Learn more about the props and the CSS customization points

Example_snippet/controller/utility/_length.js/ import TextField from '@materi. . .
import TextField from '@material-ui/core/TextField';
// or
import {
   TextField
} from '@material-ui/core';
load more v