What's the intended use case for the disabled prop in Controller?

[mwskwong]

So I initially did the following:

const {
  control,
  formState: { isSubmitting },
} = useForm();

<Controller
  control={control}
  name="name"
  disabled={isSubmitting} // <-- the key point
  render={({
    field: { disabled, ref, ...field },
    fieldState: { error },
  }) => (
    <FormControl
      disabled={disabled}
      error={Boolean(error)}
    >
      <FormLabel>Name</FormLabel>
      <Input slotProps={{ input: { ref } }} {...field} />
      <FormHelperText>{error?.message}</FormHelperText>
    </FormControl>
  )}
/>

This will cause the form values to be set to undefined after 1st submission. However, the field.value seems to be unaffected. So it creates a weird scenario of the displayed value being valid but the form doesn't pass validation on subsequence submissions. And when typing in the field, let's say the displayed value is "abc" and I type "d". The displayed value will become "abcd", but the form value, i.e. the actual value that will be submitted, is just "d".

Now this can be worked around in the following manner:

const {
  control,
  formState: { isSubmitting },
} = useForm();

<Controller
  control={control}
  name="name"
  render={({
    field: { disabled, ref, ...field },
    fieldState: { error },
  }) => (
    <FormControl
      disabled={isSubmitting || disabled} // <-- updated logic
      error={Boolean(error)}
    >
      <FormLabel>Name</FormLabel>
      <Input slotProps={{ input: { ref } }} {...field} />
      <FormHelperText>{error?.message}</FormHelperText>
    </FormControl>
  )}
/>

But this makes me wonder,

1. What's the intended use case of the disabled prop in Controller?
2. Is the current behavior not working the way it is intended?
3. If I would like to temporarily disable all fields when the form is submitting (or more accurately, make all fields read-only), is my "workaround" the intended way of doing it?

[mp3por]

I also hit this issue. I set the disabled state in useForm and receive undefined in the resolver even if the field.value contains the correct value.

I wanted to use the disabled field of useForm to disable the whole form if there is no internet and expected that if I could use the disabled field. The field works as expected and if there is no internet it will disable the form, but the side effect of breaking the connection between the inputs and the form is too much.

I believe the developers know there is a problem, because I don't see any documentation on the disabled field on the useForm parameters.

[GrayYoung]

I tried this, and it works.

const { control } = useForm();

control._disableForm(true);

[bjungs]

Ended up with something similar:

 const { isSubmitting } = form.formState;
 const { control } = form;
 useEffect(() => {
   control._disableForm(isSubmitting);
 }, [control, isSubmitting]);

[DevrMichael]

It looks like the disabled prop on Controller isn’t meant to toggle the input state directly. It mainly tells React Hook Form to skip updates and validation for that field once it’s disabled, which explains why the form values become out of sync when you use it this way.

When you pass disabled={isSubmitting} to the Controller, React Hook Form stops tracking that field, so its value gets dropped from the form state. That’s why the displayed value remains but the internal value becomes undefined or resets on the next submit.

Your workaround with

<FormControl disabled={isSubmitting || disabled}>

is the right approach if your goal is just to make the inputs read-only during submission. That way, the UI reflects the disabled state, but React Hook Form still keeps the field registered and its value intact.

So in short:

The disabled prop in Controller is more for controlling whether React Hook Form should manage that field, not for UI disabling.
For temporary read-only behavior, it’s better to handle the disabled state in your input components themselves, just like you did.