Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TextField] How to set maxLength? #1578

Closed
xuansehyun opened this issue Sep 2, 2015 · 17 comments
Closed

[TextField] How to set maxLength? #1578

xuansehyun opened this issue Sep 2, 2015 · 17 comments
Labels
component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement

Comments

@xuansehyun
Copy link

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

This comment has been minimized.

@otroboe

This comment has been minimized.

@oliviertassinari

This comment has been minimized.

@mrjosshi

This comment has been minimized.

@dkaplan-pivotal

This comment has been minimized.

@bmoeskau

This comment has been minimized.

@arminydy
Copy link
Contributor

arminydy commented Apr 14, 2018

@JarLowrey answered it here: #5309 (comment)

For the reference I mention it here too. To limit the number of input length 'e.g. 10' in material-ui@v1.0.0-beta.42, try this code:

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

@oliviertassinari oliviertassinari added support: question Community support but can be turned into an improvement component: text field This is the name of the generic UI component, not the React module! labels Apr 14, 2018
@kenecaswell
Copy link

kenecaswell commented Sep 11, 2018

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

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

@skirankumar7
Copy link

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

This comment has been minimized.

@invision-008

This comment has been minimized.

@rahulsharmaaa
Copy link

rahulsharmaaa commented Mar 25, 2019

Note that if an <input> has the attribute type="number", then maxLength won't work.

@Puneet1796

This comment has been minimized.

@geekvikas

This comment has been minimized.

@luansantosti

This comment has been minimized.

@michaelscraft

This comment has been minimized.

@Tokenyet
Copy link
Contributor

Tokenyet commented Oct 28, 2020

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>
          )
        }}
      />

mnajdova pushed a commit to mnajdova/material-ui that referenced this issue Nov 10, 2020
Bumps [acorn](https://github.com/acornjs/acorn) from 5.7.3 to 5.7.4. **This update includes a security fix.**
- [Release notes](https://github.com/acornjs/acorn/releases)
- [Commits](acornjs/acorn@5.7.3...5.7.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
@oliviertassinari oliviertassinari changed the title maxLength for text-input box [TextField] How to set maxLength? Jul 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests