How to conditionally disable an input field in React

In this tutorial, you will learn to conditionally disable an input text field in React using useState hook

Input fields are disabled using the disabled attribute, which accepts truthy value to disable the Input fields.

<input disabled="true" />

Create a local state

To disable an input field inside a <Form /> function component, we will use isDisabled local state and it’s setter method setIsDisabled, defined using the useState() hook.

import React from 'react';

const Form = ()=>{ 

  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <form>
      <input type="text" disabled={isDisabled} />
    </form>
  );
}

export default Form;

Disable Input field on button click

Use the button’s onClick event handler function handleClick to toggle the isDisable state value

Finally, pass theisDisabled state to the disabled attribute of the <input /> element

import React from 'react';

const Form = ()=>{ 

  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(!isDisabled)
  };

  return (
    <form>
      <input type="text" disabled={isDisabled} />
      <button type="button" onClick={handleClick}>
        Toggle
      </button>
    </form>
  );
}

Disable Input field on componentDidMount

To disable the Input field after the first render or on componentDidMount event we can simply initialize the isDisabled to true, by passing the true value to the useState() hook

const [isDisabled, setIsDisabled] = useState(true);

Related Solutions

• How to disable a link tag in React

• How to disable a Button when an Input field is Empty in React

• How to update parent state from child in React

• How to pass React components as props in TypeScript

• How to reset input fields in React

• How to autofocus an input element in React