I have web page form with 5 sections and almost 30 text fields. Out of which 15 are read-only and remaining are read-write. The form is built in material design.

In my case, in section 1, I have 3 read-write fields and 10 read only fields.

I tried to display the read-only fields in material design, but it does not look good.

Are there any examples of best read-only & read-write field combination of forms?

What are the best practices?

The entire form is not looking good with material design. I think material design doesn't suit the web, maybe for mobile it looks good, but not on the web.

  • 2
    Can you give a wireframe/picture and explain why it doesn't look good?
    – Boat
    Feb 21, 2018 at 7:11
  • 1
    Provide an image of what you have done so far. Feb 21, 2018 at 7:26

3 Answers 3


Have you considered showing the read-only fields as just text?

The ambiguity stems from using field which have on look but several functions. Plain text and text fields will look different and thus people will assume them to work differently.

John Doe

Date of birth: 1-2-1934

Place of birth: East Westeros

Favorite food: | pancakes |

Favorite store: | IHOP |


Even you haven't showed what you've done so far and not representing them in a good shape for the possible helpers to make clearer, here is a simple solution I think might work for your case.

There is steppers for material design you might find well-fitted either with horizontal / vertical / linear or non-linear.

  • 2
    Your comment about not showing what has been done so far, but Steppers isn't really addressing the question, IMHO, YMMV, etc. Apr 22, 2018 at 14:48
  • Since there is nothing visualised by the asker or even not any sufficient information what user totally is asking about from the viewer’s scope, I tried to give a solution which I thought it might be helpful at least as I can imagine. He says “Are there any examples of best read-only & read-write field combination of forms?” and I adviced the possible best match case in my mind. What else should I have to bring to the table? You may feel free to write your own idea/answer or up/down vote if u feel like and we can learn more about that. Apr 22, 2018 at 15:06
  • 2
    It is just that the Steppers page you linked to doesn't seem to include read-only and read-write text fields, which is what the question was about. No worries anyway. Apr 22, 2018 at 17:42

Display the Read-only fields in a disabled state!

1- Displaying the Read-only fields in a disabled state indicates they are not editable.

2- Grouping: depending on your context, you could display the fields in groups, you could group related fields, check NNG Grouping Form Elements....

3- Location: you can have the Read-only fields as a group displayed first or last of each section, that depends on your context and content.

  • Display Read-only fields first if they contain information that users need to read first before they fill out the rest of text-fields (the read/write ones).

  • Display the Read-only fields last if the focus is on the fields that the user needs to fill out, and those Read-only fields are just info that are not needed to be read first before the user fills out the rest.


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.