password-strength-input

A React password input with password strength indicator

Demo

• CodeSandbox live demo
• Live demo

Installation

npm install password-strength-input

or

yarn add password-strength-input

Simple usage

import PasswordStrengthInput from 'password-strength-input';

function App() {
  const [password, setPassword] = useState<string>('');

  const handlePasswordChange = (value: string) => setPassword(value);

  return (
    <PasswordStrengthInput value={value} onChange={handlePasswordChange} />
  );
}

Override labels and bar colors

Override all strength options

    <PasswordStrengthInput
      options={{
        tooWeak: {
          label: 'Trop faible',
          color: 'red',
        },
        weak: {
          label: 'Faible',
          color: 'yellow',
        },
        medium: {
          label: 'Moyen',
          color: 'green',
        },
        strong: {
          label: 'Fort',
          color: 'blue'
        },
      }}
    />

Override only selected strength options

    <PasswordStrengthInput
      options={{
        tooWeak: {
          label: 'Trop faible',
          color: 'red',
        },
        weak: {
          label: 'Faible',
        },
        medium: {
          color: 'green',
        },
      }}
    />

Custom styles

  <PasswordStrengthInput
    barClassName="!w-[50px]"
    strengthLabelClassName="!text-xl"
    className="!w-full"
  />

Custom icons

  <PasswordStrengthInput
    hidePasswordIcon={<EyeOff />}
    showPasswordIcon={<EyeOn />}
  />

See here for more examples that use PasswordStrengthInput.

Props

props	type	Default value	Description
options	Options	null	Options to override colors and labels of each strength
barClassName	string	empty	Override each bar indicator styles
strengthLabelClassName	string	empty	Override strength label class name
className	string	empty	Class name of text input
hidePasswordIcon	ReactNode	null	Custom icon to hide password
hidePasswordIcon	ReactNode	null	Custom icon to show password
...others	HTMLInputElement	null	All HTML input attributes

Contributing

Get started here.