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.

Usage

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). This additional guidance might be helpful when a user is signing in or filling out a form for the first time.

If you need to let users know they entered something wrong (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

Content guidelines

Inline confirmation messages help guide users through complex flows or processes users might not be familiar with. They’re not confirmation messages, so keep them brief.

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.

Static message

Tooltip-style message

Inline message in Add drawer

Launch Preview
x
px wide

  • Was this Helpful?
  •