npm Community Forum (Archive)

The npm community forum has been discontinued.

To discuss usage of npm, visit the GitHub Support Community.

How can I add an attribute "disabled" to the component input-material-ui

Hello. I’m using the input-material-ui component from npm ( and I’m not sure how can I add attributes like “disabled” or “readOnly”. I tried to put the following code:

<InputMaterialUi label="Full Name" type="text" disabled />

and doesn’t work. Also I tried to put readOnly.

Thanks in advance for your help.

(You might get an answer here, but because this forum is focused on npm, you might want to ask your question somewhere that targets experts with your package. I have moved your topic to #community:javascript)

I’m not 100% sure but it’s likely that plugin does not have support for the behavior you want (you can see it’s really new, just 2 stars and 0 issues). My main reason to believe that is that I downloaded the repo and looked for the words “disabled” or “readonly” and found nothing about it. Since InputMaterialUi is high level, it should have a native input HTML tag inside of it, and the user should be, somehow, mapping common properties (like disabled).

You may want to look for a more complete/solid option but I can’t really give any recommendation since I’m not (and never been) a React developer, sorry about that.

EDIT: Never mind, the solution for your problem seems to be simple really, you must use the value attribute and ignore the onChange event (so you have a value set but you never change the state when the user types something else, really basic React stuff). If you want to see that gray appearance that disabled inputs have, then I guess this approach won’t work. Edit 2: the docs show an (kind of ambiguous) example of this here