react-password-strength.js

const { useState } = React;

const PasswordStrength = () => {
  const [password, setPassword] = useState('');

  const requirements = [
    { label: '8+ characters', check: (pwd) => pwd.length >= 8 },
    { label: '12+ characters', check: (pwd) => pwd.length >= 12 },
    { label: 'Lowercase letter', check: (pwd) => /[a-z]/.test(pwd) },
    { label: 'Uppercase letter', check: (pwd) => /[A-Z]/.test(pwd) },
    { label: 'Number', check: (pwd) => /\d/.test(pwd) },
    { label: 'Special character', check: (pwd) => /[^a-zA-Z0-9]/.test(pwd) }
  ];

  return (
    <div className="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Enter password"
        className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
      />

      <div className="space-y-2">
        {requirements.map((req, idx) => {
          const isMet = req.check(password);
          return (
            <div key={idx} className="flex items-center gap-2">
              <div className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold
                ${isMet ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-400'}`}>
                {isMet ? '✓' : ''}
              </div>
              <span className={`text-sm ${isMet ? 'text-green-600 font-medium' : 'text-gray-500'}`}>
                {req.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<PasswordStrength />);