Controlled Form with Password Toggle in React + TypeScript

Controlled Form in React

In this example, I created a controlled form using React + TypeScript.

Features

• Controlled Inputs
• Password Toggle
• Form Submission
• Dynamic State Handling

function ControlledForm() {
  const [formData, setFormData] = useState<FormInitialValue>(initialFormValue);
  const [isVisiblePass, setIsVisiblePassword] = useState<boolean>(false);

  const handleOnchange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setFormData((pv) => ({
      ...pv,
      [name]: value,
    }));
  };

  const handleSubmitForm = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(formData);
  };

  const isPassWordDisabled = Boolean(formData.password.trim());

  return (
    <div>
      <h1>Controlled Form</h1>

      <form className="space-y-5" onSubmit={handleSubmitForm}>
        <div>
          <label htmlFor="email">Email ID</label>

          <input
            id="email"
            name="email"
            type="email"
            onChange={handleOnchange}
            value={formData.email}
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>

          <input
            id="password"
            name="password"
            type={isVisiblePass ? "text" : "password"}
            onChange={handleOnchange}
            value={formData.password}
          />

          <button
            disabled={!isPassWordDisabled}
            onClick={() => setIsVisiblePassword((pv) => !pv)}
          >
            {isVisiblePass ? "Hide" : "Show"}
          </button>
        </div>

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