Which option is better for read only mode?

Question

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?

Thanks Nuwan

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