Create reusable form section

[yannxaver]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

• Let's assume we have 10 different forms that all differ from each other
• However, they all have the two fields foo and bar
• We want to abstract everything related to the fields foo and bar into its own component which can be reused for all 10 forms

Describe the solution you'd like
A clear and concise description of what you want to happen.

• We want to create a component that can receive a react hook form as a property which must contain the two fields foo and bar + any additional fields.

Additional context
Add any other context or screenshots about the feature request here.

I have tried implementing this using a generic UseFormReturn but typescript complains that Argument of type '"foo"' is not assignable to parameter of type 'Path<T>'.

'use client';

import { UseFormReturn, useForm } from 'react-hook-form';

export default function Page() {
  return (
    <div>
      <FormA />
      <FormB />
    </div>
  );
}

type FormAFields = {
  foo: string;
  bar: string;
  a: string;
};

function FormA() {
  const form = useForm<FormAFields>();

  return (
    <form>
      <ReusableFormSection form={form} />
      <div>{/* other fields... */}</div>
    </form>
  );
}

type FormBFields = {
  foo: string;
  bar: string;
  b: string;
};

function FormB() {
  const form = useForm<FormBFields>();

  return (
    <form>
      <ReusableFormSection form={form} />
      <div>{/* other fields... */}</div>
    </form>
  );
}

type ReusableFormSectionFields = {
  foo: string;
  bar: string;
};

function ReusableFormSection<T extends ReusableFormSectionFields>({
  form,
}: {
  form: UseFormReturn<T>;
}) {
  const { register } = form;

  return (
    <>
      {/* Argument of type '"foo"' is not assignable to parameter of type 'Path<T>'.(2345) */}
      <input {...register('foo')} />
      <input {...register('bar')} />
    </>
  );
}

https://stackblitz.com/edit/stackblitz-starters-pfcy87?file=app%2Fpage.tsx&view=editor

[BrendanC23]

See this recent issue about the same topic. It doesn't look like this feature will be implemented anytime soon. This comment is the best workaround I've found.

[yannxaver]

@BrendanC23 Do you know of form libraries that support this level of abstraction? It's quite essential for me to keep my codebase maintainable.

[BrendanC23]

I don't have any other suggestions, sorry. From what I've read of other libraries, RHF is the simplest to use and most performant, so I've tried to find workarounds for RHF. I'm not sure what other libraries have better support for reusable forms.