Form 表单

表单容器——分组标题 + 行（label + 控件）+ 行间 hairline 分隔。

实时预览

下方渲染的就是 src/components/ui/Form/Form.tsx 本体，通过 react-native-web 翻译成浏览器节点。

基本信息

姓名 *

手机号 *

格式不正确

拜访设置

拜访提醒

同步给团队

视觉规范

元素	规则
分组标题	13px / 600 / fg-3，全大写、字符间距 1，上下 padding 12
Form Row	高度 ≥ 48px，左 label + 右控件，padding 12 16
行间分隔	1px hairline #EDEDED（这是 form 的例外，不用 gap）
必填标记	label 后带 * 红色（error-300）
错误提示	行下方 12px 红字

用法

import { Form, FormGroup, FormRow, Input, Switch } from '@unif/react-native-design';

<Form>
  <FormGroup label="基本信息">
    <FormRow label="姓名" required>
      <Input value={name} onChangeText={setName} placeholder="请输入" />
    </FormRow>
    <FormRow label="手机号" error="格式不正确">
      <Input value={phone} onChangeText={setPhone} keyboardType="phone-pad" />
    </FormRow>
  </FormGroup>

  <FormGroup label="拜访设置">
    <FormRow label="提醒">
      <Switch value={remind} onChange={setRemind} />
    </FormRow>
  </FormGroup>
</Form>

与 Cell · List 的区别

用途	选哪个
数据展示（设置项、客户列表）	Cell · List — 白卡 + gap
数据录入（表单）	Form — 白卡 + 行间 hairline

录入场景密度更高，hairline 分隔比 gap 更高效；展示场景反之。