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

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

• javascript
• reactjs
• material-ui

• what about set the TextInput as disabled ? – zb22 Commented Sep 26, 2019 at 20:05

5 Answers 5

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 add the readOnly html attribute to the input tag in the TextField component with inputProps.

<TextField 
    type='text' 
    defaultValue='2017-05-24'
    variant='outlined'
    disabled
    inputProps={
        { readOnly: 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