How should the useAppForm object be typed when passed to child components?

[aress31]

I am trying to understand the correct way to type a useAppForm instance when it is passed down to child components. The current documentation only shows flat examples where the form is created and used within the same component, but this does not reflect real-world usage where forms are split across multiple components.

When I pass the form instance like this:

interface ItemFieldsProps {
  form: ReturnType<typeof useAppForm>;
}

TypeScript loses all field information:
– field names do not autocomplete
– field.state.value becomes {}
– value-related components report type errors

What is the recommended way to correctly type the form object when it is passed as a prop so that all field names and value types are preserved?

Clear guidance in the documentation would be very helpful, as most real applications do not use a single flat component structure.

Minimal example:

• Parent component:

"use client";

import { useAppForm } from "@/components/my-components";
import { itemInsertSchema, type ItemInsertFormValues } from "@/schemas";
import ItemFields from "./item-fields";

export default function ItemForm({ item }: { item?: any }) {
  const form = useAppForm({
    defaultValues: {
      name: item?.name ?? "",
      token: item?.token ?? "",
    } as ItemInsertFormValues,
    validators: { onChange: itemInsertSchema },
    onSubmit: async () => {},
  });

  return (
    <form.AppForm>
      <form onSubmit={form.handleSubmit}>
        <ItemFields form={form} />
      </form>
    </form.AppForm>
  );
}

• Child component:

"use client";

import type { useAppForm } from "@/components/my-components";

interface ItemFieldsProps {
  form: ReturnType<typeof useAppForm>;
}

export default function ItemFields({ form }: ItemFieldsProps) {
  const { AppField } = form;

  return (
    <AppField name="name">
      {(field) => <input value={field.state.value ?? ""} />}
    </AppField>
  );
}