i want to add both type and maxLength to mui textfield

Question

<TextField
                      value={ele.mobile}
                      helperText={ferrors[id]?.mobile}
                      name="mobile"
                      classes={{ root: classes.textField }}
                      InputProps={{ className: classes.textField }}
                      inputProps={{ maxLength: 10, type:'number'}}
                      label="Mobile Number"
                      variant="outlined"
                      onChange={(e) => handleChange(id, e)}
                    />

I have given the values form inputProps of maxLenght and type but only type is working

maxlength and number doesn't work together. `maxlength` only work with text. More details here https://stackoverflow.com/a/18510925/2822041 — Someone Special, Jun 13 '22 at 08:15

Narek Grigoryan · Answer 1 · 2022-06-13T08:50:35.943

1

maybe this will help

 <TextField
 required
 id="required"
 label="Required"
 min={0}
 inputProps={{
    maxLength: 5,
    type: 'number',
}}
onInput={(e)=>{
    e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,e.target.maxLength)
}}
/>

edited Jun 13 '22 at 08:50

answered Jun 13 '22 at 08:40

Narek Grigoryan

369
3
7

score 0 · Answer 2 · answered Jun 13 '22 at 08:39

0

if you want to make number of lenght max 10, just use max with largest number:

inputProps={{ max: 9999999999, type:'number'}}

answered Jun 13 '22 at 08:39

Wraithy

1,722
1
5
13

score 0 · Answer 3 · answered Jun 13 '22 at 10:15

About your question, I think you can try to use maxlength setting in inputProps.

<TextField
                      value={ele.mobile}
                      helperText={ferrors[id]?.mobile}
                      name="mobile"
                      classes={{ root: classes.textField }}
                      InputProps={{ className: classes.textField }}
                      inputProps ={{ maxlength: 10, type:'number'}}
                      label="Mobile Number"
                      variant="outlined"
                      onChange={(e) => handleChange(id, e)}
                    />

i want to add both type and maxLength to mui textfield

3 Answers3