Inline messages are an additional way of guiding users through complex or unfamiliar flows. Use them carefully. Many fields and flows don’t need the additional distraction.
Use an inline message when the user correctly enters data in a field or control and clicks, tabs, or taps outside of that field (on field blur).
If you need to let users know they entered incorrect data (such as including a letter in a phone number field), use the error messages pattern.
Appearance and behavior
The inline confirmation displays as the user interacts successfully with a form field. Use sparingly to avoid over-communicating with the user.
There are two variations of the inline confirmation message depending on the content they’re associated with.
- Beside a form field
- In the drawer or feed
Inline confirmation messages help guide users through complex flows or processes users might not be familiar with. Since they’re confirmation messages, keep them brief and straightforward.
These messages confirm that the user has filled out the form or done some other action correctly. If the user entered incorrect information, use the error messages pattern.
Here are a few tips for how to write helpful inline confirmation messages:
- Keep it brief and straightforward. These messages are just quick confirmations that everything is OK. Don’t distract users from moving forward.
- Write in the active voice. This helps the copy be more direct and usually shorter.
Example: You added Laura Davenport’s note to this invoice.
- Recommended voice and tone attributes: Straightforward, experienced, encouraging