Forth page link: Add Show/Hide Password Toggle to Your Form

Awesome! Let's create a reusable React component for the password field that includes:

✅ Password input
✅ Show/Hide toggle
✅ Real-time validation with rules
✅ Password strength meter
✅ Confirm password support (optional toggle)

Reusable React Password Field Component

This component will be self-contained and easily usable in any form. You can plug it into registration forms, reset pages, etc.

Install Prerequisites

If you're using a React project with Create React App or Vite, you're good to go. No external packages required for this version.

✅ React Component Code

import React, { useState } from "react";

const PasswordField = ({ requireConfirmation = true }) => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);

  const rules = [
    { regex: /.{8,}/, label: "At least 8 characters" },
    { regex: /[a-z]/, label: "At least one lowercase letter" },
    { regex: /[A-Z]/, label: "At least one uppercase letter" },
    { regex: /\d/, label: "At least one number" },
    { regex: /[\W_]/, label: "At least one special character" },
  ];

  const checkStrength = (pwd) => {
    let strength = 0;
    rules.forEach(rule => {
      if (rule.regex.test(pwd)) strength++;
    });
    if (strength <= 2) return "weak";
    if (strength <= 4) return "medium";
    return "strong";
  };

  const getStrengthClass = (level) => {
    return {
      weak: "w-1/3 bg-red-500",
      medium: "w-2/3 bg-yellow-500",
      strong: "w-full bg-green-500",
    }[level];
  };

  const strength = checkStrength(password);

  return (
    <div className="space-y-4 text-sm w-full max-w-md">
      <div>
        <label>Password</label>
        <input
          type={showPassword ? "text" : "password"}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full p-2 border rounded"
          required
        />
        <label className="block mt-1">
          <input
            type="checkbox"
            checked={showPassword}
            onChange={() => setShowPassword(!showPassword)}
          />{" "}
          Show Password
        </label>
        <div className="mt-2 space-y-1">
          {rules.map((rule, idx) => (
            <div
              key={idx}
              className={rule.regex.test(password) ? "text-green-600" : "text-red-500"}
            >
              {rule.regex.test(password) ? "✔" : "✖"} {rule.label}
            </div>
          ))}
        </div>
        <div className="mt-2 h-2 bg-gray-300 rounded">
          <div className={`h-2 rounded ${getStrengthClass(strength)}`} />
        </div>
      </div>

      {requireConfirmation && (
        <div>
          <label>Confirm Password</label>
          <input
            type={showConfirm ? "text" : "password"}
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            className="w-full p-2 border rounded"
            required
          />
          <label className="block mt-1">
            <input
              type="checkbox"
              checked={showConfirm}
              onChange={() => setShowConfirm(!showConfirm)}
            />{" "}
            Show Confirm Password
          </label>
          <div className="mt-1">
            {confirmPassword === ""
              ? null
              : confirmPassword === password
              ? <span className="text-green-600">✔ Passwords match</span>
              : <span className="text-red-500">✖ Passwords do not match</span>}
          </div>
        </div>
      )}
    </div>
  );
};

export default PasswordField;

Usage Example

import React from "react";
import PasswordField from "./PasswordField";

const RegistrationForm = () => {
  return (
    <div className="p-6">
      <h1 className="text-xl font-bold mb-4">Register</h1>
      <form>
        <PasswordField requireConfirmation={true} />
        <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded" type="submit">
          Sign Up
        </button>
      </form>
    </div>
  );
};

export default RegistrationForm;

Tips

• Set requireConfirmation={false} if you only want a single password field.

• Add a prop like onValidChange(isValid) if you want to notify parent form of validation status.

• You can replace checkboxes with toggle icons using react-icons or custom SVGs.

⚠️ Common Pitfalls

• ❌ Don’t forget to validate on the server side as well.

• ❌ Avoid enabling the “Submit” button before checking password === confirmPassword.

• ❌ Don’t use only length as a measure of strength—check character variety too.

Would you like this implemented in Vue, Angular, or a Tailwind-styled standalone HTML snippet next?

Click here