Version 7.46.0-next.0

[bluebill1049]

disabled prop

• new disabled props for useForm
• allow user to disable the entire form with all associated inputs

useForm({
  disabled: true
})

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const { register, handleSubmit, control } = useForm({
    disabled,
  });

  return (
    <form
      onSubmit={handleSubmit(async () => {
        setDisabled(true);
        await sleep(100);
        setDisabled(false);
      })}
    >
      <input
        type={'checkbox'}
        {...register('checkbox')}
        data-testid={'checkbox'}
      />
      <input type={'radio'} {...register('radio')} data-testid={'radio'} />
      <input type={'range'} {...register('range')} data-testid={'range'} />
      <select {...register('select')} data-testid={'select'} />
      <textarea {...register('textarea')} data-testid={'textarea'} />

      <Controller control={control} render={({ field }) => <input disabled={field.disabled}  />} name="test" />

      <button>Submit</button>
    </form>
  );
}

---

This discussion was created from the release Version 7.46.0-next.0.

[nfrankeln]

Hi I'm new to web development could someone explain the implications of this? Why would one want to disable a form on submission. Is it simply to prevent multiple submissions?

[sajidkhanpk]

Yes, you want your form to be disabled while submitting to prevent any other interaction.

[bluebill1049]

That's correct. Image when you press enter and submit a long form.

[sajidkhanpk]

@bluebill1049 I mostly use MUI nowadays. So, does it work for Controller?

[bluebill1049]

there would be a disabled prop pass down for you to wire up with MUI input.

[sajidkhanpk]

Great!

[titenis]

Doesnt seem to work when disabled state is changed outside the form. For example if disabled: isLoading from react query, the form stays disabled even if isLoading becomes false. I cannot create sandbox, because cant select this version in codesandbox

[Moshyfawn]

I've managed to reproduce the issue you're describing. It seems to be related to the values API usage. Omitting values seem to "fix" the problem.

Side note: you can always init a project on your local machine and import it into codesandbox. Here's a reproduction sandbox

[Wekios]

What is the status of this? This is still not deployed or exposed or by the lib.

[bluebill1049]

next minor update