Form 表单

组织字段、标签和校验提示，收集表单数据。

提交与校验

交互预览提交与校验

basic.tsx

import { Button, Form, FormField, Input, Select } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function FormBasic() {
  const [result, setResult] = useState('');
  return (
    <Form
      className="leaf-demo-stack leaf-demo-stack--wide"
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setResult(`${data.get('name')} · ${data.get('email')} · ${data.get('team')}`);
      }}
      onReset={() => setResult('')}
    >
      <FormField label="姓名" required>
        <Input name="name" placeholder="你的姓名" />
      </FormField>
      <FormField label="工作邮箱" required help="用于接收项目通知">
        <Input name="email" type="email" placeholder="hello@example.com" />
      </FormField>
      <FormField label="所属团队" required>
        <Select
          name="team"
          options={[
            { value: 'design', label: '设计团队' },
            { value: 'engineering', label: '工程团队' },
          ]}
        />
      </FormField>
      <FormField>
        <div className="leaf-demo-row">
          <Button type="submit">提交</Button>
          <Button type="reset" variant="outline">
            重置
          </Button>
        </div>
      </FormField>
      {result && <output className="leaf-demo-note">{result}</output>}
    </Form>
  );
}

标签宽度

交互预览标签宽度

自动标签宽度

label-width.tsx

import { Button, Form, FormField, Input, Switch } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function FormLabelWidth() {
  const [automatic, setAutomatic] = useState(true);
  const [extra, setExtra] = useState(false);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <div className="leaf-demo-row">
        <Switch checked={automatic} onChange={(event) => setAutomatic(event.target.checked)}>
          自动标签宽度
        </Switch>
        <Button variant="outline" onClick={() => setExtra(!extra)}>
          切换长标签
        </Button>
      </div>
      <Form labelWidth={automatic ? 'auto' : 110}>
        <FormField label="姓名">
          <Input name="name" />
        </FormField>
        <FormField label="工作邮箱">
          <Input name="email" />
        </FormField>
        {extra && (
          <FormField label="紧急联系人电话号码">
            <Input name="emergency" />
          </FormField>
        )}
      </Form>
    </div>
  );
}

Form API

属性	类型	默认值	说明
`labelWidth`	`number \| 'auto'`	`'auto'`	数字设置像素宽度；auto 统一使用最宽标签
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	标签与字段的排列方式
`labelAlign`	`'left' \| 'right'`	`'right'`	标签对齐方向
`disabled`	`boolean`	`false`	禁用表单内的 Leaf 控件
`onSubmit / onReset`	`FormEventHandler<HTMLFormElement>`	—	保留提交 / 重置事件
`ref`	`Ref<HTMLFormElement>`	—	表单引用

FormField API

属性	类型	默认值	说明
`label / help / error`	`ReactNode`	—	标签 / 提示 / 业务错误
`htmlFor`	`string`	自动生成	与输入控件的 id 关联；一个字段对应一个控件或组
`required`	`boolean`	`false`	显示必填标记并传递给控件
`labelWidth`	`number`	—	当前字段的标签宽度，单位像素

类型

定义组件属性或组装变量时可导入相关类型。

import type { FormProps, FormFieldProps } from '@sudden3/leaf-ui';

使用说明

默认自动计算同一 Form 中最宽的标签。标签文本、字体或可见字段变化时更新；窄屏和 vertical 布局按纵向排列。支持 onSubmit、onReset、action、method 等表单属性。

用 FormData 读取控件上的 name。简单校验使用 required、type、minLength 等属性，错误提示跟随字段显示；业务与服务端错误通过 error 传入。设置 noValidate 可以接管校验。FormData 返回字符串，不会自动转换为数字或嵌套对象，未勾选复选框不会提交 false。受控字段的重置由应用处理。

#Form 表单

#提交与校验

#标签宽度

#Form API

#FormField API

#类型