Page 1 of 1

A material design for read only fields

Posted: Wed Nov 14, 2018 2:38 pm
by davidbalansa
Hi all,

I am trying to determine the best way to display read only fields following material design concepts. I have come up with 2 designs and am not really happy with both.

1. Make the field enabled false. It differentiates the field from an input capable field as it does not get focus or change style. The downside is the user can't copy the value to the clipboard and use elsewhere.
Capture.PNG
Capture.PNG (22.08 KiB) Viewed 2090 times
2. Make the field read only true.The positive is that the user can copy the value. The negative is it can confuse the user as it responds to focus and changes its style like an input capable field.
Capture2.PNG
Capture2.PNG (9.35 KiB) Viewed 2090 times
My questions are:
1.What would be considered the material design the standard for a read only field?
2.What have others decided on for displaying read only fields?
3. Is it possible to set the field to read only and not have it change style when it receives focus (remains grey)? This is similar to the example I found
https://material.angularjs.org/1.1.0/demo/input

Thanks in advance!

Re: A material design for read only fields

Posted: Thu Nov 15, 2018 1:55 am
by jyoung
I had the same issue, I settled on two things.
  1. Mark the Field as "ReadOnly"
  2. Set the Appearance to "None"
In this case I also hid the Helper Text by setting the HelperPosition to "None"
Capture.PNG
Capture.PNG (7.86 KiB) Viewed 2071 times
I don't know what the "offical" MD guidelines are, but for me, removing the under line removed the "indication" that it was editable, hence the Appearance "None".

Joe

Re: A material design for read only fields

Posted: Thu Nov 15, 2018 8:12 am
by davidbalansa
Hi Joe,

Thank you for the response, it was extremely helpful. I think your implementation works very well.

David