I'm working on a website/web service. In one of my forms the user need to enter 2 values: A and B. Then when the user clicks the submit button some info appears in a separated view next to the form.

I have additional parameter C, this parameter gets its value from A and B (as a result of some Math calculation). Once the user changing A or B then C will be updated automatically.

The user can't directly update the value of C (only by updating A and/or B).

I can't decide whether the form-control (textbox) should be in ReadOnly state or Disable state.

I have noticed that both ReadOnly and Disable provide the same outcome: The user can read the value from the textbox but can't edit it. In the case of ReadOnly the textbox element appear the same as a regular textbox, while in the case of Disabled the textbox is grayed-out so the user can understand this textbox isn't editable.

Now since both ReadOnly and Disabled provide the same behavior (with a different appearance) I don't know which to decide? What are the guidelines for selecting between ReadOnly and Disabled? When should I prefer to use the one over the other???

Native Textbox

Native Textbox: ReadOnly and Disabled

Material Design Textbox

Material Design Textbox: ReadOnly and Disabled


I don't think that using any form control for C is the right thing here. Using a form control implies that, at some point, the user can directly change it (by clicking/tapping on it), which doesn't appear to be the case here.

To me, while C is a value based on other inputs, it could be considered merely text, and displayed as such.


If you let the input in readOnly and not in disabled, the user will think that if he edit the value of C then the value of A and B would be changed.

If the inputs of the values A, B and C have the same style then the users would not make the difference between an editable input and a non-editable input.

Also if nothing happens when he click on the input of the C value he will probably think that it's a bug.

I think that the Disabled Textbox is the better choice because the user will know just by looking on the input that it's not editable.

  • Everything you say makes sense, but the style of a read-only textbox was designed to look like a regular textbox (not like the disabled one), so why do we even have the read-only textbox??? – Gil Epshtain May 9 '18 at 16:32


  • This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant.
  • The "readonly" attribute is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
  • The browser doesn't add any visual style for "readonly" elements.


  • This attribute indicates that the form control is not available for interaction.
  • The click event will not be dispatched on disabled controls.
  • The value of the "disabled" control will not be submitted with the form.
  • Disabled form elements do not receive focus and therefore are been skipped in tab navigation.
  • Most browsers (Chrome, Firefox, Edge, IE and more) adds some style (grayed-out) to disabled elements.

User Experience

Since both ReadOnly and Disabled attributes give the user a way to view the value of the element but don't modify it. While one of them - disabled - provide a visual feedback, the designer needs to choose whether the user can differentiate between a standard element and a non-modified element.
If you want the user to identify the element is in non-modified mode, use "disabled".
If you want a non-modified element to appear like the rest of the form elements, use "readonly".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.