PolarisInline error
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 not be valid and how to fix it.
Use when the merchant has entered information that is not valid into multiple fields inside of a form, or needs to be displayed in a non-standard position in the form layout.
import{InlineError}from'@shopify/polaris';importReactfrom'react';functionInlineErrorExample(){return<InlineErrormessage="Store name is required"fieldID="myFieldID"/>;}Props
Want to help make this feature better? Pleaseshare your feedback.
- message any
-
Content briefly explaining how to resolve the invalid form field input.
- fieldID string
-
Unique identifier of the invalid form field that the message describes.
最佳实践
Inline errors should:
- Be brief
- Be written in sentence case
- Be visible immediately upon a form input that is not valid
- Be removed as soon as the input is valid so merchants can immediately tell they fixed the issue
- Describe specific solutions so merchants can successfully complete their task in the form
- Not be placed out of context of the input or group of inputs they describe
Learn more about error message patterns
Content guidelines
内联错误消息
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.
内联错误消息should:
- Clearly explain what went wrong, give a next step, or offer a one-click fix
- Be short and concise, no more than a single sentence
- Usepassive voiceso merchants don’t feel like they’re being blamed for the error
Do
- Store name is required
Don’t
- You didn’t enter a store name.
Related components
- To create a list of exceptions that describe a resource,use the exception list component
Accessibility
- Use the required
fieldIDprop to give the inline error a uniqueid. This ties the error to a form field usingaria-describedbyso that it's conveyed to screen reader users. - Use the required
messageprop to provide the text that describes the error. - The inline erroriconhelps visually identify the error message for merchants who have difficulty seeingcolorsor who use settings that remove color from the page.