I am taking an input from the user of the card number and wants that the length entered by user must not be less than and more than 12. Here is the declaration of my textfield.
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
maxLength={12}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>
Now I am not understanding whether to use javascript or any event handler for restricting the length.
You can set the maxLength property for limiting the text in text box.
Instead of onChange method you can pass maxLength to the inputProps (lowercase i, not InputProps) props of material-ui TextField.
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
inputProps={{ maxLength: 12 }}
/>
Basically we can edit all input element's native attrs via inputProps object.
Link to TextField Api
I found another solution here.
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>
<TextField
autoFocus={true}
name="name"
onChange={handleChange}
placeholder="placeholder"
id="filled-basic"
variant="filled"
size="small"
fullWidth
inputProps={{
maxLength: 25,
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>
<TextField
id="username"
name="username"
label={translate('username')}
onChange={handleChange}
onBlur={handleBlur}
value={values.username}
error={Boolean(errors.username) && touched.username}
helperText={(errors.username && touched.username && translate(errors.username))}
required
inputProps={{maxLength :20}}
/>
Is it worth noting that Material-ui <TextField /> component doesn not have a maxlength property. However, the original html <input> does. So you don't really need to create any extra function to get this to work. Just use the base <input> attributes using inputProps.
The actual answer is this:
inputProps={
{maxLength: 22}
}
// Result => <input maxlength="yourvalue" />
What this does is it sets the maxlength attribute of the underlying <input> resulting in: <input maxlength="yourvalue" />. Another important thing to note here is that you use inputProps and not InputProps. The one you're targeting is the small letter inputProps.
I discovered something weird on the behavior between TextField and Input from Material UI
They are very similar to each other, the problem I see is the following:
On the TextField component, if you use InputProps with capital "I", the Adorments are shown, but in the other hand if you use it as lowercase "inputProps", the maxLength Html attribute is TAKEN as valid, but not the adorments
I ended up using INPUT instead of a TextField so you can use adorments in
<TextField
variant="outlined"
required
fullWidth
error={errors.email}
id="email"
label={t("signup-page.label-email")}
name="email"
onChange={handleChange}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton aria-label="toggle password visibility">
<EmailIcon />
</IconButton>
</InputAdornment>
),
maxLength: 120,
}}
/>
in the above code the adorment is ignored, but maxLength taken used as "inputProps" camel case
The below code is a working example, as you might see, I embraced it as in the old style within a Form Control, the input label and the input "outlinedInput"
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="firstName">Password</InputLabel>
<OutlinedInput
value={values.firstName}
autoComplete="outlined"
name="firstName"
variant="outlined"
required
fullWidth
error={errors.firstName}
id="firstName"
label={t("signup-page.label-firstname")}
onChange={handleChange}
autoFocus
inputProps={{ maxLength: 32 }}
/>
</FormControl>
Solution. My final recommendation, use an OutlinedInput instead of a TextField, so you can put in a separated way Adorments and also maxLength
Below a working example with FormControl OutlinedInput, inputProps - maxLength and an end Adorment Icon
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
value={values.passwordConfirm}
variant="outlined"
required
fullWidth
error={errors.passwordConfirm}
name="passwordConfirm"
label={t("signup-page.label-password-confirm")}
type={values.showPasswordConfirm ? "text" : "password"}
id="password-confirm"
onChange={handleChange}
inputProps= {{maxLength:32}}
endAdornment= {
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword("passwordConfirm")}
onMouseDown={handleMouseDownPassword}
>
{values.showPasswordConfirm ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
/>
{errors.passwordConfirm && (
<p className="error"> {errors.passwordConfirm} </p>
)}
</FormControl>
If you're using MUI 5, version 5.0.6, due to a support for legacy, you will have to do something like this,
<TextField
id="standard-textarea"
label="A label"
placeholder="Some text here"
multiline
variant="standard"
defaultValue={"Hello"}
inputProps={{
maxLength: 255,
}}
InputProps={{
disableUnderline: true,
}}
/>
The TextField supports both inputProps and InputProps, but some properties don't work vice versa.
maxLength does not work as expected in InputProps, and a property like disableUnderline for the MUI 5 does not work as expected in inputProps.
Be careful with a possible typo with the i.
See the API for more information, https://mui.com/api/text-field/.
The accepted answer won't work in Firefox for large numbers (greater than 16 digits). Numbers just behaves in a weird way.
For a 22 length field we ended up using this:
<TextField
required
validateOnBlur
field="cbu"
label="22 dígitos del CBU"
validate={validate.required}
type="text"
inputProps={
{maxLength: 22}
}
onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }}
/>
Basically, native maxLength constraint for text fields, plus a conversion from string to numbers "on the fly".
Improvement
Also you may prefer to make this reusable and more semantic.
# constraints.js
const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') };
# form.js
<TextField
field="cbu"
label="22 dígitos del CBU"
inputProps={
{maxLength: 22}
}
onInput={(e) => onlyNumbers(e) }
The material-design <TextField /> component haven't any length property.
You can create yours in the onChange() method.
updateTextField(event,value){
if(value.length <= 12){
//Update your state
}
else{
//Value length is biggest than 12
}
}
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
onChange={(e,v) => this.updateTextField(e,v)}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>
In your change handler, just write.
if (event.target.value.length !== maxLength ) return false;
I had a similar issue, but with TextareaAutosize. Unfortunately,
inputProps={{ maxLength: 12 }}
doesn't work with TextareaAutosize.
The below workaround works for TextareaAutosize and for both text and numbers.
Inspired by the accepted answer to this question - https://stackoverflow.com/a/49130234/5236534
onInput = {(e) =>{
e.target.value = (e.target.value).toString().slice(0,10)
import * as React from 'react';
import TextareaAutosize from '#mui/material/TextareaAutosize';
export default function MinHeightTextarea() {
return (
<TextareaAutosize
aria-label="minimum height"
minRows={3}
placeholder="Minimum 3 rows"
style={{ width: 200 }}
onInput = {(e) =>{
e.target.value = (e.target.value).toString().slice(0,10)
}}
/>
);
}
Link to demo: Limiting character length in MUI TextareaAutosize
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
inputProps={{
maxLength: 20,
}}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>
For people who still are looking for a solution for the number field, this solution worked fine for me.
onInput={(e: any) => {
e.target.value = Math.max(0, parseInt(e.target.value))
.toString()
.slice(0, 2);
}}
Make sure to use any.
Related
I have this textfield with an autocomplete and why is this throwing a warning?
<TextField
type="text"
id="standard1"
label="Email"
fullWidth
required
autoComplete
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
This is because you provided autoComplete as prop without any values, which is same as autoComplete={true}.
From the MUI docs autoComplete is of type "string"
See MUI docs and spec
According to Mui autoComplete is a prop of type string that helps users to fill forms faster it just specifies whether your input field should have autocomplete on or off.
So just change :
<TextField
type="text"
id="standard1"
label="Email"
fullWidth
required
autoComplete
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
to :
<TextField
type="text"
id="standard1"
label="Email"
fullWidth
required
autoComplete='on'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
consider the following block of code:
<TextField name="name" required className='my-2 mx-auto' label="Full Name" variant="standard" style={{ "width": "60%" }} value={name} onChange={(event) => { setName(event.target.value); }} {...register({
required: "Name is required"
})} />
I have replaced the ref with ...register but I am still getting the error, can someone please help me fix it?
No you can't do this because TextField is not only an input.
I think you have to pass {...register({ required: "Name is required"})} to the TextField's input and to do that, you could use TextField's inputProps prop. Something like:
<TextField
name="name"
required
className='my-2 mx-auto'
label="Full Name"
variant="standard"
style={{ "width": "60%" }}
value={name}
onChange={(event) => { setName(event.target.value); }}
inputProps={{...register({required: "Name is required"})}}
/>
I want to alter the font colour of disabled MUI TextField.
It should be black so that it is visible.
Here is code
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I removed underline for standard text Field. Now I want text color black when it is disabled.
Inspired by Madhuri's solution, you can also use the sx prop without importing styled:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "black",
},
}}
/>
You need to use ".Mui-disabled" class to override required css as below,
import TextField from "#mui/material/TextField";
import { styled } from "#mui/material/styles";
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}));
function App() {
return (
<>
<span>Disabled Input:</span>
<CustomDisableInput
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
value="your text"
InputProps={{ disableUnderline: true }}
disabled={true}
/>
</>
);
}
Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv
In Formik, I try to use {...formik.getFieldProps('email')} on my input field
instead of using value, onChange, and onBlur. But it's not working.
This works :
<input id="email" name="email" type="text" value={formik.values.email} onChange={formik.handleChange} onBlur={formik.handleBlur} />
But this doesn't :
<input id="email" type="text" {...formik.getFieldProps("email")} />
Code is here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14
Any ideas ?
Thanks !
As MiDas said, what you are doing should work if you are on latest version.
I'll mention an even more concise alternative: the Field component.
Field component handles the field property propagation for you.
Simple example:
<Field name="email" type="text" />
Notice that you don't need to do {...formik.getFieldProps("email")}, or any other "boilerplate".
Related to Field is useField, which can be used to make custom form components just as easy to use - no "boilerplate" needed.
A custom component:
function TextInputWithLabel({ label, ...props }) {
// useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
// which we can spread on <input> and also replace ErrorMessage entirely.
const [field, meta] = useField(props);
return (
<>
<label
htmlFor={props.id || props.name}
css={{ backgroundColor: props.backgroundColor }}
>
{label}
</label>
<input className="text-input" {...field} type="text" {...props} />
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
);
}
Usage:
<TextInputWithLabel name="input1" label="Random comment" />
As seen in code from codesandbox.
I am using the Material-UI library to make a form. But I don't know how to differentiate my TextField when they are in readOnly or in edit mode. look the same way. I would like the user to notice when he are in one way or another. Thanks in advance.
<TextField
inputProps={{
readOnly: Boolean(readOnly),
disabled: Boolean(readOnly),
}}
required
fullWidth
name="first_name"
type="text"
label="First Name"
value={first_name || ''}
onChange={this.handleChange}
/>
A bit late to the party and the option might not have been present at the time but instead of setting your input to 'disabled' you can pass the 'disableUnderline' property and set it to 'true'.
<TextField InputProps={{readOnly: true, disableUnderline: true}}/>
You can set The InputField as disabled like this:
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={values.name}
onChange={handleChange('name')}
margin="normal"
disabled
/>
And you can see the difference whenever the input is disabled or not.
As per documentation:
disabled bool: If true, the input element will be disabled.
You can set the Input field as Disabled and add a disabled class to the TextField.
<TextField
disabled = {isDisabled()}
required
fullWidth
name="first_name"
type="text"
label="First Name"
value={first_name || ''}
onChange={this.handleChange}
className={this.getDisabledClass}
/>
Define the CSS color or some style for the disabled class that you added:
Ex:
.disabled{
opacity:0.5
}
You can conditionally add a CSS class to it if readonly is true. Example
className={`${readonly ? "r-only" : ""}`}
and define the visual differences in a CSS rule for .r-only
<TextField
type='text'
defaultValue='2017-05-24'
variant='outlined'
disabled
inputProps={
{ readOnly: true, }
}
/>