0

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

Nuwan
  • 27
  • 6

1 Answers1

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

Roman Videnov
  • 294
  • 1
  • 4