跳到内容 Shopify标志北极星

内联错误

内联错误是简短的上下文消息，告诉商家表单中的单个或一组输入出现了问题。使用内联错误帮助商家理解为什么表单输入可能无效，以及如何修复它。

当商家在表单内的多个字段中输入了无效的信息，或者需要在表单布局中的非标准位置显示时使用。

进口｛InlineError｝从“@shopify /北极星”；进口反应从“反应”；函数InlineErrorExample（）｛返回<InlineError消息＝“必须填写店铺名称”fieldID＝“myFieldID”/>；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 InlineErrorProps
消息 任何

简要解释如何解析无效表单字段输入的内容。
fieldID 字符串

消息描述的无效表单字段的唯一标识符。

最佳实践

内联错误应该:

  • 是短暂的
  • 用句式书写
  • 在无效的表单输入时立即可见
  • 一旦输入有效，将被删除，以便商家可以立即告诉他们修复了问题
  • 描述具体的解决方案，以便商家能够成功地完成表单中的任务
  • 不要脱离输入或它们所描述的输入组的上下文

了解有关错误消息模式的更多信息

内容的指导方针

内联错误消息

由于错误消息位于问题源的正下方，副本只需要解释错误发生的原因。消息还可以说明下一步要做什么，或者提供一键修复。

内联错误消息应该:

  • 清楚地解释哪里出了问题，给出下一步，或者提供一键修复
  • 要简洁明了，不要超过一句话
  • 使用被动语态这样商家就不会觉得他们是错误的罪魁祸首

做

  • 店铺名称

不

  • 您没有输入商店名称。

可访问性

  • 使用必要的fieldID道具赋予内联错误一个惟一的id．这将错误绑定到使用的表单字段aria-describedby这样才能传达给屏幕阅读器的用户。
  • 使用必要的消息道具提供描述错误的文本。
  • 内联错误图标帮助难以看到的商家直观地识别错误消息颜色或者使用删除页面颜色的设置。