Type Challenge: Generic Form Field Component with Type-Safe Path Selection

[alexwork1611]

Hello,
I'm trying to create a reusable form field component that:

1. Takes an array of values of type T
2. Accepts a UseFormReturn<TFormValues> instance
3. Requires a fieldName that should only allow paths (using FieldPath) where the corresponding value type (using FieldPathValue) matches T

Example usage:

const form = useForm<{
  role: User_Role;
  name: string;
}>();

// This should type-check ✅
<FormField 
  options={userRoles} // User_Role[]
  form={form}
  fieldName="role" // Only "role" should be allowed since it matches User_Role
/>

// This should error ❌
<FormField 
  options={userRoles}
  form={form}
  fieldName="name" // Should error since 'name' is string, not User_Role
/>

Is there a way to achieve this type safety using RHF's type system? I've tried various approaches with FieldPath and FieldPathValue but haven't found a clean solution.

Here's what I've tried:

type FormWithFieldNameProps<TValue, TFormValues extends FieldValues> = {
  form: UseFormReturn<TFormValues>;
  fieldName: FieldPath<TFormValues> extends infer Path
    ? Path extends string
      ? FieldPathValue<TFormValues, Path> extends TValue
        ? Path
        : never
      : never
    : never;
};

type CustomFormAutocompleteProps<TValue, TFormValues extends FieldValues> = App.Utils.Prettify<
  {
    options: TValue[];
  } & FormWithFieldNameProps<TValue, TFormValues>
>;

Hope it's not too confusing lol.

Thanks!