跳到内容 Shopify标志 北极星

表格布局

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

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

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

道具

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

接口 FormLayoutProps
孩子们? 反应．ReactNode

要在布局中显示的内容。

最佳实践

表单应该:

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

内容的指导方针

节标题形式

的内容指导原则标题和副标题．

字段标签

标签是字段的简短描述。标签不是帮助文本，它们不应该被用来提供指导，但它们应该是有意义的，并清楚地指出期望什么。标签应该是:

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

做

  • 电子邮件地址

不

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

做

  • 电话号码

不

  • 我的电话号码是:

帮助文本

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