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.

Anatomy

Composed of an icon and message, inline validation is located directly underneath the relevant input field. The color corresponds to the variation of inline validation.

A. Icon

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.

B. Text

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.

Behavior and Interaction

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.

Variations

Hint Text

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.

Error 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.

Adaptive Design

Inline validation is available in compact and all regular widths. It adapts to the container with the related form cell.

Resources

Development: FUIInlineValidationTableViewCell, FUIInlineValidationView

Related Components/Patterns: Error Handling