How to show read only label:Text in material design

  • Looking through material design components, specifically text input fields the guidelines are really clear for input fields.

    However, its unclear how to lay out non input text fields.

    Say I've got a form like this:

    enter image description here

    That's fine if the user is expecting to edit all the fields, however, I've often got this kind of information read-only (or it doesn't make sense to edit it ever like if it's reporting information back from an operation or calculation)

    However, the idea of the "label" for the "intput field" that hovers over it is established. If I were not to use the input text box outlined I'd end up with something awfully messy if things were combined - for example, if I could only edit the employee number & floor area:

    enter image description here

    Or should I emulate the "floating label" without the line underneath to indicate user entry?

    enter image description here

    what did u end up doing?

    The second option. No line, to differentiate it from an actual input, but labeled similar to an input with the label above.

  • Tory

    Tory Correct answer

    5 years ago

    Consistency is key.

    Angular Material - Demo - Input

    Your second image would break the consistent visual that is reinforced on the form. The "floating label" emulation would keep the consistency, but only having the input underline removed may not clearly display that the the building is not an editable field.

    Perhaps gray out the text similar to the floating label. This may not be required, and just omitting the field underline maybe enough. If you look at the disabled input field example in the Material Demo I linked, you can see that the value is grayed out, but also underlined with a dotted line. The grayed out text informs the user that the input is not currently editable, the dotted line signifies that the user maybe able to change it in the future.

    I'd also have the input label be "Building", instead of "Building Name". You have that on the first two images, but not on the third.

    Hope this helps!

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM