Inline validation provides static information to a user or provides temporary feedback in response to a user’s input and is commonly used with form cells in forms. Inline validation should be placed underneath the relevant form cell and may display hint text, a success message, a warning message, or an error message.
Inline error in form sheet
Provides a visually accessible cue to the user when user action is required or form feedback is important.
Hint text variation does not have an icon.
Provides a succinct and clear message to the user. The message may wrap to a maximum of three lines in certain uses cases, but we recommend limiting the message to one line.
Inline validation anatomy (from top to bottom: hint text, success message, warning message, error message)
Depending on the variation and use case, inline validation may persist or disappear.
Hint text should persist as it provides contextual information to the user. A success or warning message appears in response to a user’s interaction and may disappear.
An error message similarly appears in response to a user’s interaction but will disappear once the error has been corrected.
In certain use cases, error messages may also be used in conjunction with a page-level error banner.
If there are critical errors, the user may be required to correct the errors before being permitted to proceed with input or form submission.
Correcting an error
Use hint text to convey contextual information to the user.
There is no icon used with hint text, and the hint text should persist. If there is a success, warning, or error message related to the form cell that needs to be displayed temporarily, the hint text will revert back.
Success and Warning Message
Use a success or warning message to provide temporary feedback in response to a user’s input.
Success and warning message
Use an error message to provide temporary feedback in response to a user’s input when user action is required for correction.
An error message provides information about the error and how to correct it.