Skip to content

tiavina-mika/mui-password-strength-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mui-password-strength-input

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

Demo


Gif

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.