reset() does not clear inputs wrapped with useController unless defaultValues are set

[Best-Sardar]

sandbox: https://codesandbox.io/p/devbox/v23s9q

Describe the bug

When using useController to wrap input fields in react-hook-form, calling reset() without arguments does not clear the input fields unless defaultValues are explicitly set for those fields in useForm. This behavior can be unintuitive and inconvenient for large forms where setting default values for every field is impractical.

Steps to reproduce

1. Create a form with one or more fields wrapped in a custom input component using useController.
2. Do not provide defaultValues in useForm.
3. Call reset() without any arguments.
4. Observe that the input values do not clear/reset as expected.

Expected behavior

Calling reset() without arguments should clear all input fields (i.e., reset their values to empty or undefined), regardless of whether defaultValues were provided.

Workarounds

• Providing explicit defaultValues for each field works but can be cumbersome.
• Calling reset({ fieldName: '' }) with empty values per field is tedious for large forms.
• Handling undefined values inside custom inputs by defaulting to empty string is possible but adds boilerplate.

Additional context

It would be helpful if react-hook-form’s reset() either:

• Resets fields to empty by default if no defaultValues were provided,
• Or provides a clear way to reset all fields to empty values without requiring explicit defaults.

This would improve usability for large and dynamic forms using controlled components wrapped by useController.

[BrendanC23]

I don't think there's an easy way to handle all of the potential use-cases. For example, if the form contains these values, what should it be reset to?

{
    people: [
        {
            first: "John",
            last: "Smith",
        }
    ]
}

There are several alternatives that this could be reset() to.

{
    people: undefined,
}

{
    people: []
}

{
    people: [
        {
            first: undefined,
            last: undefined,
        }
    ]
}

{
    people: [
        {
            first: "",
            last: "",
        }
    ]
}

Setting all of the fields to undefined is problematic if a form is controlled and React will complain that controlled components are being changed to uncontrolled. Setting all of the form values to an empty string is fine if all of the form values are strings, but would cause issues if the form contains number, null, Date, Set, arrays, boolean, etc.

Improperly resetting the form could cause type issues or validation issues.

---

If you want a custom reset behavior, I think the easiest way is to either provide defaultValues when you call useForm initially or provide the values to reset to when you call reset(newValues).

You could do something like the following:

const currentValues = form.getValues();
const copiedForm = structuredClone(currentValues);
const newValues = setNestedKeysToEmptyString(copiedForm);
form.reset(newValues);

You would need to write your own setNestedKeysToEmptyString() that is able to reset the form following your desired specifications.

[bluebill1049]

Exactly, also there is more info in the doc as well: https://react-hook-form.com/docs/useform/reset

For controlled components you will need to pass defaultValues to useForm in order to reset the Controller components' value.

[BrendanC23]

You may also want to look at something like https://github.com/toiroakr/zod-empty if you don't want to hard-code the default values.