CODEWITHSUNDEEP
material-uiformik
Pushpendra Yadav
Pushpendra Yadav

Reputation: 219

How to disable a Textfield in Material UI when used with Formik

I have a resulable Material UI textfield that I am using with my formik form - 

<Fieldname="reportType"
    label="Report Type"
    disabled
    as={TextFieldOutLined}
/>

I want to make my reportType disabled. When I am passing disabled like above to my TextFieldOutLined it is not working.

Below is my TextFieldOutLined snippet.

const TextFieldOutLined = ({ label, disabled, ...props }) => {
    const classes = useStyles();

    const [field] = useField(props);
    return (
        <TextField
            className={classes.formControl}
            {...field}
            {...disabled}

Upvotes: 4

Views: 38015

Answers (1)

Michael
Michael

Reputation: 1872

You should pass disabled={disabled} to your TextField component to disable your TextField when the value of disabled prop is truthy.

<TextField
    className={classes.formControl}
    {...field}
    disabled={disabled}

Upvotes: 10

Related Questions