使用方法

FormLayout 排列字段。它不是 <form>。字段放在默认插槽里，再选一个方向。

<script setup lang="ts">
import { FormLayout } from '@astryx-vue/core/FormLayout'
import { TextInput } from '@astryx-vue/core/TextInput'
</script>

<template>
  <FormLayout>
    <TextInput v-model="name" label="姓名" />
    <TextInput v-model="email" label="邮箱" />
  </FormLayout>
</template>

direction 取 vertical（默认）、horizontal 或 horizontal-labels。纵向按间距刻度 4 往下排。横向把字段放进等宽的列。横向标签把标签放在左边、控件放在右边，窄于 480px 时改回纵向。

defaultOptionality 取 optional 或 required。它只影响没有自己写 isOptional 或 isRequired 的字段的标记和 aria-required，不写原生 required。同一字段两个都写时，选填优先。没有 FormLayout 祖先时，aria-required 仍是 isRequired && !isOptional。

嵌套的布局各自保留方向。纵向表单里可以放一行横向字段。

解剖

部分	说明
表单标题	说明这个表单是干什么的标题。
字段	带标签、用来收集数据的输入组件。
页脚	装着提交或取消这类确认按钮。

最佳实践

指引	实践
推荐	一组短字段，例如名和姓，用横向。
推荐	每个字段都有标签、而且表单比手机宽时，用横向标签。
避免	把页面标题这类无关内容放进布局。它会参加网格排列。
避免	指望 defaultOptionality 拦住提交。它只改标记和 aria-required。

示例

横向

First Name

Last Name

两个字段并排，适合姓和名这类成对输入。

设置表单

Display Name

Email

Timezone

Bio

设置表单把标签放在输入框旁边。

混合控件

Full Name

Role

Notifications

• Email
  Email
• SMS
  SMS
• Push
  Push

同一张表单里有文本框、选择器和复选框。

嵌套地址

First Name

Last Name

Email

City

State

ZIP

地址表单把纵向排列和横向成组的字段混在一起。