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.
2 Answers
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.
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
andclose 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