I have an Angular application where I have used mat-form fields (Material components) to build the forms. Here I am having a requirement to implement a read only mode.

I hope disabling all mat form fields with its default style will not be an option. It will be visually ugly and contextually confusing. So decided disable the mat-form field and override it's style. Options are

  1. Set border - hi light the mat-form element boarder
  2. Set background color - set background color to mat form field
  3. Remove all boarder and background color

Kindly share your thoughts which option is most suitable one for readonly mode?

enter image description here

Thanks Nuwan

1 Answer 1


I would recommend designing view mode fields as option #3 (remove border and background color). Keep the value/data as a simple text.

Option 1 and 2 provide less visual contrast and may cause the misunderstanding of the difference between editable fields and not editable.

Useful article: How to Properly Design Inline Edit Feature in Web Applications

Related question: Signifying to user that field is editable

  • Thanks @Roman for your prompt feedback.
    – Nuwan
    Sep 16, 2021 at 2:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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