Releases · react-hook-form/react-hook-form

`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>
  );
}