Material-ui: maxLength for text-input box

[xuansehyun]

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!

[shaurya947]

Hey @xuansehyun , you should just be able to set the attribute maxLength on your TextField element like so:

<TextField
    style={styles.textfield}
    hintText="Hint Text (MultiLine)"
    multiLine={true} 
    maxLength="2" />

Let me know if that doesn't work.

[otroboe]

It works for me, you can close this I think :)

[oliviertassinari]

@otroboe I agree.

[mrjosshi]

how to can i add validation error if there is min length is less then defined minLength

[dkaplan-pivotal]

<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
  <div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
    <textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
  </div>
</div>

I tried this and it didn't work. The maxLength ended up on a div, not the textarea. Here's my code that generated the above HTML.

<TextField
              InputProps={{
                id: 'announcementText',
                disableUnderline: true,
                multiline: true,
                rows: 10,
                classes: {
                  root: textFieldTextRoot,
                  input: textFieldTextInput,
                },
              }}
              maxLength="2"
              name="text"
              type="text"
              value={this.state.text}
              onChange={this.handleInputChange}
              placeholder="Update Text"
              style={{ display: 'block' }}
            />

"material-ui": "1.0.0-beta.30",

Update: I found out I can get this working by using inputProps={{maxLength: 2}}. The casing is important. It does not work on InputProps

There is no documentation about maxLength directly on a TextField.

[bmoeskau]

I am also having trouble getting this working with the betas, and it definitely seems like it should be a property directly on the component API.

[arminydy]

@JarLowrey answered it here: https://github.com/mui-org/material-ui/issues/5309#issuecomment-355462588

For the reference I mention it here too. To limit the number of input length 'e.g. 10' in [email protected], try this code:

<TextField
  inputProps={{
    maxLength: 10,
  }}
/>

[kenecaswell]

Note that InputProps and inputProps are two different properties of TextField. This fact wasted a few hours of my life.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

[skirankumar7]

Note that InputProps and inputProps are two different properties of TextField. This fact wasted a few hours of my life.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

In the same way min length property also works right?

[fijijavis]

@kenecaswell thanks for the posts, i just spent an hour trying to figure out what i was doing wrong.

[invision-008]

@kenecaswell You just saved a life 👍 Thanks bro !!

[rahulsharmaaa]

If there is type='number', maxLength won't work
type='number'
inputProps={{
maxLength: 10,
}}
/>
It should be:
inputProps={{
maxLength: 10,
}}
/>

[Puneet1796]

A better solution without any attribute (in case they does not work).
In your TextField's onChange(), update your state only if the length of the value is equal to <YOUR_MAX_LENGTH>.

onChange = (event) => {
      // Check if the textfield's that
      // you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

      if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
            && event.target.value !== <YOUR_MAX_LENGTH>) {
            // Update your state here
      }
}

[geekvikas]

A better solution without any attribute (in case they does not work).
In your TextField's onChange(), update your state only if the length of the value is equal to <YOUR_MAX_LENGTH>.

onChange = (event) => {
      // Check if the textfield's that
      // you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

      if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
            && event.target.value !== <YOUR_MAX_LENGTH>) {
            // Update your state here
      }
}

OnChange is never a better solution as it will still fire the event even after the limit has reached, it might seem like nothing with modern CPU but we should design our systems to enforce restrictions at the HTML level if we can. maxLength is HTML attribute and cross browser compatible even without JavaScript

[luansantosti]

inputProps={{ maxLength: 365 }} works for me.

[michaelscraft]

In case you are using formik-material-ui the way to go will be:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

[Tokenyet]

I want to use type='number', so the only solution for me is to use substring at setState part.

Example:

  const [deposit, setDeposit] = React.useState<number | null>(null);
  const disabled = deposit == null || deposit < 0 || deposit === 0;

  return (
      <TextField
        variant='outlined'
        color='primary'
        fullWidth
        type='number'
        value={deposit}
        onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
        label='Deposit'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <Button
                variant='text'
                disabled={disabled}
                color={'primary'}
                onClick={(_) => onSend(deposit!)}>
                <Typography color='primary'>{'Submit'}</Typography>
              </Button>
            </InputAdornment>
          )
        }}
      />