Form

<Form className="w-72" onFormSubmit={(v) => console.log(v)}>
  <Field label="Email" name="email">
    <Input name="email" type="email" placeholder="you@example.com" required />
  </Field>
  <Field label="Username" name="username">
    <Input name="username" placeholder="Hulian user" required />
  </Field>
  <Button type="submit" size="sm">Submit</Button>
</Form>

<Form
  className="w-72"
  errors={{ email: "This email address has been registered" }}
  onFormSubmit={(v) => console.log(v)}
>
  <Field label="Email" name="email">
    <Input name="email" type="email" defaultValue="taken@example.com" />
  </Field>
  <Button type="submit" size="sm">Submit</Button>
</Form>

const form = useForm({ initialValues: { email: "", pwd: "", confirm: "" } });
const email = form.register("email", {
  rules: [
    { required: true, message: "Please fill in your email address" },
    { pattern: /^[^@]+@[^@]+$/, message: "The email format is incorrect" },
  ],
});
const pwd = form.register("pwd", { rules: [{ required: true, min: 6, message: "At least 6 digits" }] });
const confirm = form.register("confirm", {
  dependencies: ["pwd"],
  rules: [{ validator: (v, values) => { if (v !== values.pwd) throw new Error("Two passwords are inconsistent"); } }],
When
});

<form onSubmit={form.submit(onFinish, onFinishFailed)} noValidate>
  <Field label="Email" error={email.error}>
    <Input value={email.value} onChange={email.onChange} onBlur={email.onBlur} />
  </Field>
  <Field label="Password" error={pwd.error}>
    <Input type="password" value={pwd.value} onChange={pwd.onChange} onBlur={pwd.onBlur} />
  </Field>
  <Field label="Confirm password" error={confirm.error}>
    <Input type="password" value={confirm.value} onChange={confirm.onChange} onBlur={confirm.onBlur} />
  </Field>
  <Button type="submit" size="sm">Submit</Button>
</form>

<FormList<{ name: string }> value={rows} onChange={setRows}>
  {(fields, ops, value) => (
    <>
      {fields.map((f) => (
        <div key={f.key} className="flex items-center gap-2">
          <Input value={value[f.name]?.name ?? ""} onChange={...} />
          <Button onClick={() => ops.remove(f.name)}>Delete</Button>
        </div>
      ))}
      <Button onClick={() => ops.add({ name: "" })}>+ Add Contact</Button>
    </>
  )}
</FormList>