3

I have a vertical list of expansion panels. Each panel has a form under it. I would like to know the best style for showing that the form has been dirtied (edited) on the expansion panel title. The goal is to allow the user to know at a glance what has been modified without having to open all the panels. I looked through the Material design guide but didn't see anything about change labeling on forms. I had thought about using italics, bold or adding an asterisk after the title, but figured I'd ask if there was an official way to show this.

3

You might consider a pattern that communicates the status of the form to the user without inferring anything about the content of the form. (An asterisk is often used to indicate that something has changed, but in the specific context of a form, it could infer that it's required.)

Status chips near the title can tell the user that something is in progress without inferring anything about the input itself.

Titles with status chips

1
  • Thanks, ended up using this :)
    – busbina
    Nov 19 at 21:00
0

There's a similar situation on the profile form of some sites. The example in the image below shows several alerts and actions that may be useful:

  • In the upper left there are two links (green): expand all items and close all items
  • At the top there's a text line in a red background and outline warning : Verify the following errors
  • Each items in the list has a ✅ check mark icon indicating they have been completed
  • The item with the error has a ⚠️ warning icon along with a blue outline

subscription

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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