Conditionally Disable an Input Field Using React Hook Form

Interactive forms rarely keep every field active all the time. Sometimes an input should only be editable after a checkbox is selected, a dropdown value changes, or another field meets specific validation rules. React Hook Form makes this straightforward without introducing unnecessary state management.

Learn on the Go. Download the Codeflare Mobile App from Google Play Store.

Here’s how to conditionally disable an input field using React Hook Form.

Step 1: Install React Hook Form

npm install react-hook-form

Step 2: Create the Form

Imagine you’re building a shipping form. If the user checks “Same as Billing Address”, the shipping address field should become disabled.

import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    watch,
    handleSubmit
  } = useForm();

  const sameAddress = watch("sameAddress");

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        <input
          type="checkbox"
          {...register("sameAddress")}
        />
        Same as Billing Address
      </label>

      <br /><br />

      <input
        type="text"
        placeholder="Shipping Address"
        disabled={sameAddress}
        {...register("shippingAddress")}
      />

      <br /><br />

      <button type="submit">
        Submit
      </button>
    </form>
  );
}

How It Works

The magic happens with the watch() function.

Connect React to Cloudinary

const sameAddress = watch("sameAddress");

Whenever the checkbox changes, watch() returns its latest value.

You can then use that value directly:

disabled={sameAddress}

When the checkbox is checked:

sameAddress = true

the input becomes disabled.

When it’s unchecked:

sameAddress = false

the input becomes editable again.

Disable Based on a Select Option

You can also disable fields depending on a dropdown selection.

const paymentMethod = watch("paymentMethod");

<select {...register("paymentMethod")}>
  <option value="card">Card</option>
  <option value="cash">Cash</option>
</select>

<input
  placeholder="Card Number"
  disabled={paymentMethod === "cash"}
  {...register("cardNumber")}
/>

If the user selects Cash, the card number field becomes disabled.

Disable Using Multiple Conditions

Sometimes a single condition isn’t enough.

const age = watch("age");
const employed = watch("employed");

<input
  {...register("company")}
  disabled={age < 18 || !employed}
/>

The company field is only enabled when the user:

• is at least 18 years old, and
• is employed.

Disable the Entire Form

React Hook Form doesn’t require disabling inputs one by one. You can use a <fieldset>.

<fieldset disabled={isSubmitting}>
  <input {...register("name")} />
  <input {...register("email")} />
  <button>Submit</button>
</fieldset>

This is especially useful while submitting data to prevent duplicate requests.

Keep Validation in Mind

A disabled input:

• cannot receive focus,
• cannot be edited,
• is generally excluded from form submission by the browser.

If you still need the value submitted, consider using:

readOnly

instead of:

disabled

A read-only field remains part of the submitted form while preventing user edits.

Best Practices

• Use watch() instead of additional React state when the condition depends on another form field.
• Prefer readOnly if the value should still be submitted.
• Group related controls inside a fieldset when disabling an entire section.
• Keep disabling logic simple and easy to understand.
• Test your form to ensure users can still complete it without confusion.

Conclusion

React Hook Form’s watch() function makes conditional field disabling simple and reactive. Whether you’re toggling an input based on a checkbox, dropdown, or multiple conditions, you can keep your forms clean without introducing extra state or complex event handlers. By combining watch(), the native disabled attribute, and readOnly where appropriate, you can build forms that respond naturally to user input while remaining easy to maintain.

About the Author

codeflare

Administrator

Latest tech news and coding tips.

Visit Website View All Posts