跳到内容 Shopify标志北极星

表格布局

使用表单布局使用标准间距排列表单中的字段。默认情况下，它垂直堆叠字段，但也支持水平字段组。

用于垂直堆叠表单字段，这使得它们更容易扫描和完成。

进口{FormLayout，文本框}从“@shopify /北极星”；进口反应从“反应”；函数例子（）{返回（<FormLayout><文本框标签＝“商店名称”onChange＝{（）= >{}}自动完成＝“关闭”/><文本框类型＝“电子邮件”标签＝“帐户电子邮件”onChange＝{（）= >{}}自动完成＝“电子邮件”/></FormLayout>）；}

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 FormLayoutProps
孩子们？ 反应．ReactNode

要在布局中显示的内容。

最佳实践

表单应该:

  • 考虑到商家的时间和隐私，只询问必要的信息
  • 将相关任务分组在章节标题下，以提供更多上下文，并使界面更易于浏览
  • 遵循一个合乎逻辑的、可预测的顺序——例如，在表格上总是先问名字，然后问姓氏

内容的指导方针

表单部分标题

表单部分标题应遵循内容指南标题和副标题．

字段标签

标签是字段的简短描述。标签不是帮助文本，它们不应该用来提供指导，但它们应该是有意义的，并清楚地表明预期的内容。标签应该是:

  • 位于表单字段上方或旁边的
  • 简明扼要(1-3个字)
  • 以句子形式书写(第一个单词大写，其余字母小写)

做

  • 电子邮件地址

不

  • 你的电子邮件地址是什么?

做

  • 电话号码

不

  • 我的电话是:

帮助文本

帮助文本为人们填写表单字段提供了额外的指导。这个文本很容易被人们忽略，所以商家不需要依赖它来填写表单。与所有形式一样，帮助文本应该简洁且易于阅读。

相关的组件