Troubles with Typing defaultValues in a Dynamic Form with React Hook Form

[tanyaMel]

Hello!

I'm building a dynamic form component in TypeScript with react-hook-form that can render different types of fields (e.g., text fields, switches, checkboxes) based on a configuration array passed as props. I want the component to accept default values for these fields and display them accordingly.

Here's my code:

import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { Button, Stack, TextField } from "@mui/material"
import { ComponentProps } from "react"
import SwitchRoundLabeled from "./components/SwitchRoundLabeled"
import CheckboxWithLabel from "./components/CheckboxWithLabel"

// Common types for different field types
type FormCommonFieldProps = {
  fieldName: string
}

type FormTextFieldProps = { type: "textField"; textFieldProps: ComponentProps<typeof TextField> } & FormCommonFieldProps
type FormSwitchFieldProps = ComponentProps<typeof SwitchRoundLabeled> & { type: "switch"; checked?: boolean } & FormCommonFieldProps
type FormCheckboxFieldProps = ComponentProps<typeof CheckboxWithLabel> & { type: "checkbox"; checked?: boolean } & FormCommonFieldProps
type FormFieldProps = FormTextFieldProps | FormSwitchFieldProps | FormCheckboxFieldProps

// Type guards
function isTextField(field: FormFieldProps): field is FormTextFieldProps {
  return field.type === "textField"
}
function isSwitchField(field: FormFieldProps): field is FormSwitchFieldProps {
  return field.type === "switch"
}
function isCheckboxField(field: FormFieldProps): field is FormCheckboxFieldProps {
  return field.type === "checkbox"
}

// Extract field names for dynamic typing
type ExtractFieldNames<T extends FormCommonFieldProps[]> = T[number]["fieldName"]
type DefaultValuesType<T extends FormCommonFieldProps[]> = Partial<Record<ExtractFieldNames<T>, string | boolean>>
export type ResultFormData = Record<string, string | boolean>

type FormProps<T extends FormFieldProps[]> = {
  fields: T
  defaultValues?: DefaultValuesType<T>
  onSubmit?: SubmitHandler<ResultFormData>
}

const Form = <const T extends FormFieldProps[]>({ fields, defaultValues, onSubmit }: FormProps<T>) => {
  const { handleSubmit, control } = useForm<ResultFormData>({
    defaultValues, // (1)
  })

  return (
    <form onSubmit={onSubmit && handleSubmit(onSubmit)}>
      <Stack gap={2} sx={{ color: "text.primary" }}>
        {fields.map((fieldData) => {
          return (
            <Controller
              key={fieldData.fieldName}
              name={fieldData.fieldName}
              control={control}
              render={({ field }) => {
                if (isTextField(fieldData)) {
                  return <TextField {...field} {...fieldData.textFieldProps} />
                }
                if (isSwitchField(fieldData)) {
                  return <SwitchRoundLabeled {...fieldData} switchProps={{ checked: !!field.value, ...field }} />
                }
                if (isCheckboxField(fieldData)) {
                  return <CheckboxWithLabel {...fieldData} checkboxProps={{ checked: !!field.value, ...field }} />
                }

                return <></>
              }}
            />
          )
        })}
        <Button type="submit" variant="contained" color="primary">
          OK
        </Button>
      </Stack>
    </form>
  )
}

export default Form

I’m encountering an issue at line (1) with the defaultValues prop. If I remove the explicit typing for ResultFormData, TypeScript shows the following error:

Type Partial<Record<ExtractFieldNames<T>, string | boolean>> is not assignable to type AsyncDefaultValues<Partial<Record<ExtractFieldNames<T>, string | boolean>>> | DefaultValues<Partial<Record<ExtractFieldNames<T>, string | boolean>>> | undefined

It seems like TypeScript cannot correctly infer the type of defaultValues. When ResultFormData is explicitly provided, everything works fine, but I would like this component to be flexible with any field configurations passed in.

Question:

1. Am I misunderstanding something about how defaultValues typing should work in react-hook-form?
2. Is this a limitation or bug in react-hook-form’s type inference for useForm?
3. Any suggestions on how to make this work while keeping the codebase flexible for different field configurations?

Thanks in advance!