mui-password-strength-input

A Material-UI password text field with password strength indicator.

Demo

• CodeSandbox
• Live demo

Installation

npm install mui-password-strength-input

or

yarn add mui-password-strength-input

Please note that @mui/material (and their @emotion/ peers) are peer dependencies, meaning you should ensure they are installed before installing mui-password-strength-input.

npm install @mui/material @emotion/react @emotion/styled

or

yarn add @mui/material @emotion/react @emotion/styled

Get started

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 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 selected strength options only

    <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 />}
  />

Material-UI TextField props

  <PasswordStrengthInput
    placeholder="Enter your password"
    // ...other mui TextField props
  />

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	Each bar indicator class name
strengthLabelClassName	string	empty	Strength label class name
className	string	empty	TextField class name
hidePasswordIcon	ReactNode	null	Custom icon to hide password
hidePasswordIcon	ReactNode	null	Custom icon to show password
barWidth	number	null	Width of each bar. By default, if not defined the bar will use flex 1
...otherProps	TextFieldProps	null	All mui TextField props

Contributing

Get started here.