Examples
Use when the merchant has entered invalid information into multiple fields inside of a form, or needs to be displayed in a non-standard position in the form layout.
Inline errors are brief, in-context messages that tell merchants something went wrong with a single or group of inputs in a form. Use inline errors to help merchants understand why a form input may be invalid and how to fix it.
Use when the merchant has entered invalid information into multiple fields inside of a form, or needs to be displayed in a non-standard position in the form layout.
fieldID
prop to give the inline error a unique id
. This ties the error to a form field using aria-describedby
so that it's conveyed to screen reader users.message
prop to provide the text that describes the error.Use when the merchant has entered invalid information into multiple fields inside of a form, or needs to be displayed in a non-standard position in the form layout.
See Material Design and development documentation about accessibility for Android:
Use when the merchant has entered invalid information into multiple fields inside of a form, or needs to be displayed in a non-standard position in the form layout.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Inline errors should:
Since the error message is directly below the source of the problem, the copy only needs to explain why the error happened. Optionally, the message can clarify what to do next or offer a one-click fix.
Inline error messages should:
Store name is required
You didn’t enter a store name.