14

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

Improve this question
2
  • 1
    what did u end up doing?
    – Meli
    Jun 23, 2017 at 0:31
  • The second option. No line, to differentiate it from an actual input, but labeled similar to an input with the label above.
    – Joe
    Jul 6, 2017 at 12:24

3 Answers 3

Reset to default
4

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!

Improve this answer
1
  • What about the view part? means not the editing screen. In the edit screen, we can put editable text fields. Which is pretty good to see. But I am confused about viewing the key-value pair of data. eg(Name: Joe, City: Tokyo, etc)
    – KIRAN K J
    Nov 1, 2021 at 13:47
2

Color is the most obvious way to show the user that there is a difference between editable and readonly fields. Unfortunately the options you illustrated all look disjointed to me. I feel like each entry should have the underline otherwise it's hard to tell the difference between non-form items (like the title) and form items.

You could try changing the foreground color to light grey but you'd have to find a different color for you titles (perhaps the apps primary color? something non grey scale)

Improve this answer
2

You could use a text field component that is disabled. As per the MD spec:

Disabled text fields are uneditable. They have a dotted input line and less opacity so that they appear less tappable.

enter image description here

Reference: https://material.io/guidelines/components/text-fields.html#text-fields-states

Improve this answer

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.