How to conditional disable input depend on another input value in "React-hook-form'?

Question

I want to conditional disable input based on another input value. The common use case is we have a checkbox and we need to disable/enable another input in the same form. How could I achieve it with react-hook-form? I want to disable, not about validation when submit.

Currently, I am using FormControlLabel (material-ui) with react-hook-form for that. Any help will be appreciated.

Updated! Here is a small demo code for my idea

import { Controller, useForm } from "react-hook-form";
import { FormControlLabel, Checkbox } from "@material-ui/core";

const { control } = useForm({/* some options */});

// Below is render function

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller
  name="checkbox"
  control={control}
  render={({ field: { onChange, value }}) => {
    return (
      <FormControlLabel
        control={
          <Checkbox
            checked={value}
            onChange={e => {
              onChange(e.target.checked);
            }}
          />
        }
        label="Enable text input?"
        labelPlacement="end"
      />
    );
  }}
/>
<Controller
  name="text-input"
  control={control}
  render={({ field: { onChange, value } }) => {
    return (
      <TextField
        value={value}
        onChange={onChange}
        disabled={/* WHAT TO DO HERE???? */}
      />
    );
  }}
/>;
</form>

pedram afra · Accepted Answer · 2021-09-18 09:28:19Z

26

you can use watch:

const {register, watch} = useForm();

return ( 
<div>
  <input type="checkbox" ref={register} name="input-a" />
  <input ref={register} name="input-b" disabled={!watch("input-a")} />
</div>
);

answered Sep 18, 2021 at 9:28

pedram afra

1,2321 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luis Edwards Over a year ago

What if we have several more inputs which depends on the values of the first inputs? For example, if we have 5 inputs, and the 2 input depends on the first, the 3d one depends on the 1st and the 2nd one to render, the resulting code wouldn't be unscallable? since we are going to have a lot of watch conditions to render the next inputs and so on

pedram afra Over a year ago

@LuisEdwards Well, to get the form values in react-hook-form you have 3 options: state, getValues, and watch. if you always want the latest values, use watch; if not, use getValues because it doesn't trigger rerender. either way, in your usecase using them for several inputs, would be unscalable :/

Gee Dev · Accepted Answer · 2025-05-26 06:08:28Z

When you want to disable an input based on a checkbox in a React Hook Form, you can use useWatch to check the value of the checkbox in real time. This way, the text input will be disabled or enabled automatically when the checkbox changes.

See this article for reference and more clarity.: https://medium.com/javascript-decoded-in-plain-english/disable-an-input-field-using-react-hook-form-950ee5214092

Here's how to do it with a plain React and React Hook Form:

import { useForm, Controller, useWatch } from "react-hook-form";

function MyForm() {
  const { control } = useForm();

  // This watches the checkbox value (default is false)
  const isCheckboxChecked = useWatch({
    control,
    name: "checkbox",
    defaultValue: false,
  });

  return (
    <form>
      {/* Checkbox that controls the text input */}
      <Controller
        name="checkbox"
        control={control}
        render={({ field }) => (
          <label>
            <input type="checkbox" {...field} checked={field.value} />
            Enable Text Input
          </label>
        )}
      />

      {/* Text input that disables if checkbox is unchecked */}
      <Controller
        name="textInput"
        control={control}
        render={({ field }) => (
          <input
            {...field}
            type="text"
            disabled={!isCheckboxChecked} // Disables when checkbox is off
          />
        )}
      />
    </form>
  );
}

The useWatch hook watches the checkbox value. When the checkbox is checked or unchecked, isCheckboxChecked is updated immediately. The text input uses this value to set its disabled state. If the checkbox is disabled, the text input is disabled. If the checkbox is enabled, the text input is enabled.

This method works with any input type, not just checkboxes and text fields. You can use the same logic with Material-UI or other libraries by replacing the tags with their components. The important part is to set disabled={!isCheckboxChecked} so that the field responds to changes.

Collectives™ on Stack Overflow

How to conditional disable input depend on another input value in "React-hook-form'?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related