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>
);

[neefrehman]

I would love the ability to do this as well! I'm creating a custom wizard hook and components with tanstack form and the ability to embellish form.AppForm with more context (and ideally rename it more semantically, though this is secondary to me) would be super helpful. I've thought similar things about AppField, too.

An API like this has occurred to me. I'm sure getting the typing working properly for the custom components will be difficult, but maybe it could be helped by a higher-order component, like withForm?

export const { useAppForm: useForm } = createFormHook({
  formContext,
  fieldContext,
  formComponents,
  fieldComponents,
  formComponent: MyForm, // Auto-wraps in formContext.Provider
  fieldComponent: MyField, // Auto-wraps in fieldContext.Provider
});

And then at the callsites:

const form = useForm(formOptions)

<form.Form customProp={value}>
  <form.Field customProp={value} />
</form.Form>

Replacing the AppForm and AppField syntax with just Form and Field makes a lot of sense to me. Especially when writing a form package for use across my company, where I don't think it makes sense to also allow usage of the current form.Field since it becomes an escape hatch for writing un-idiomatic code. I appreciate this discussion is from a while ago, but I'm curious to hear your thoughts @crutchcorn.