Is it possible to create a custom Form component?

[mhuggins]

Similar to creating custom fields, I'd like to make a custom form component so that I don't have to create both a form element and a form.AppForm child beneath that. (And perhaps even handle the Suspense aspect as well for lazy-loaded fields.) I'd like to do something like this:

import Suspense, { type FormHTMLAttributes, type ReactNode } from "react";
import { useFormContext } from "../../hooks/use-form";

export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
  fallback?: ReactNode;
}

export const Form = ({
  children,
  fallback = null,
  ...props,
}: FormProps) => {
  const form = useFormContext();

  return (
    <form {...props}>
      <Suspense fallback={fallback}>
        <form.AppForm>{children}</form.AppForm>
      </Suspense>
    </form>
  );
};

Then use it to render a form like so:

const form = useAppForm({ ... });

return (
  <form.Form onSubmit={ ... }>
    <form.InputField name="email" />
  </form.Form>
);

[mhuggins]

This is the closest I was able to come up with for now:

import { FormAsyncValidateOrFn, FormValidateOrFn } from "@tanstack/react-form";
import React, { type FormHTMLAttributes, type ReactNode, Suspense } from "react";
import { useAppForm } from "../../hooks/useAppForm";

type AppFieldExtendedReactFormApi<
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta,
> = ReturnType<
  typeof useAppForm<
    TFormData,
    TOnMount,
    TOnChange,
    TOnChangeAsync,
    TOnBlur,
    TOnBlurAsync,
    TOnSubmit,
    TOnSubmitAsync,
    TOnDynamic,
    TOnDynamicAsync,
    TOnServer,
    TSubmitMeta
  >
>;

interface FormProps<
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta,
> extends FormHTMLAttributes<HTMLFormElement> {
  form: AppFieldExtendedReactFormApi<
    TFormData,
    TOnMount,
    TOnChange,
    TOnChangeAsync,
    TOnBlur,
    TOnBlurAsync,
    TOnSubmit,
    TOnSubmitAsync,
    TOnDynamic,
    TOnDynamicAsync,
    TOnServer,
    TSubmitMeta
  >;
  fallback?: ReactNode;
}

export const Form = <
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta,
>({
  children,
  form,
  fallback = null,
  ...props
}: FormProps<
  TFormData,
  TOnMount,
  TOnChange,
  TOnChangeAsync,
  TOnBlur,
  TOnBlurAsync,
  TOnSubmit,
  TOnSubmitAsync,
  TOnDynamic,
  TOnDynamicAsync,
  TOnServer,
  TSubmitMeta
>) => {
  return (
    <form {...props}>
      <Suspense fallback={fallback}>
        <form.AppForm>{children}</form.AppForm>
      </Suspense>
    </form>
  );
};

Usage:

const form = useForm({ ... });

return (
  <Form form={form} onSubmit={...}>
    {...}
  </Form>
);