mui-password-checklist

A Material-UI password input with list of password validation steps or conditions that should be fulfilled.

Demo

• CodeSandbox demo
• Live demo

Installation

npm install mui-password-checklist

or

yarn add mui-password-checklist

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

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

or

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

Get started

Simple usage

import PasswordChecklist from 'mui-password-checklist';
import { useState, ChangeEvent } from "react";

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

  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  }

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

Override

    <PasswordChecklist
      // override class name
      className='border-1 border-gray-500'
      // override error messages
      validationMessages={{
        minLength: 'Devrait contenir au moins 6 caractères',
        lowerCase: 'Devrait contenir au moins une lettre minuscule',
        upperCase: 'Devrait contenir au moins une lettre majuscule',
        number: 'Devrait contenir au moins un chiffre',
        specialCharacters: 'Devrait contenir au moins un caractère spécial',
      }}
      // override options
      options={{
        minLength: 6,
        allowedSpecialChar: "="
      }}
      // override TextFieldProps
      fullWidth
    />

Custom icons

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

Material-UI TextField props

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

Using it with Zod and React Hook Form

Use the validatePasswordChecklist function to check if all rules are respected.

import { zodResolver } from '@hookform/resolvers/zod';
import { SubmitHandler, useForm, FormProvider, Controller } from 'react-hook-form';
import z from 'zod';
import PasswordChecklist, { validatePasswordChecklist } from 'mui-password-checklist';

const schema = z.object({
  password: z.string()
  .max(64, "Should not exceed 64 characters")
  .superRefine((value: string, ctx: any) => {
    const { allChecksPassed } = validatePasswordChecklist(value);
    // no need to trigger the error if the password rules are met
    if (allChecksPassed) return;
    ctx.addIssue({
      code: "custom",
      message: "Should contain at least 8 characters, one lowercase, one uppercase, one number, and one special character",
    });
  })
});

type FormValues = z.infer<typeof schema>;

export default function SignUpForm() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
  });

  const handleFormSubmit: SubmitHandler<FormValues> = async values => console.log('values: ', values);

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(handleFormSubmit)}>
        <Controller
          name="password"
          control={form.control}
          defaultValue=""
          render={({ field }) => (
            <PasswordChecklist
              {...field}
              error={Boolean(form.formState?.errors?.password)}
              // display the error message only if the error is not a custom one
              helperText={form.formState?.errors?.password?.type !== 'custom' ? form.formState?.errors?.password?.message : ''}
            />
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
};

See here for more examples that use PasswordChecklist.

Props

Props	Type	Default value	Description
options	CheckPasswordOptions	null	Override colors and labels of each strength
validationMessages	ValidationMessages	null	Override each password validation massages
className	string	empty	TextField class name
hidePasswordIcon	ReactNode	null	Custom icon for showing the password
hidePasswordIcon	ReactNode	null	Custom icon for hiding the password
...otherProps	TextFieldProps	null	All Material UI TextField props

Types

ValidationMessages

Name	Type	Description
minLength	string	Message to display for the minimum required password length
lowerCase	string	Message to display for the lowercase validation
upperCase	string	Message to display for the uppercase validation
number	string	Message to display for the number validation
specialCharacters	string	Message to display for the required special characters

CheckPasswordOptions

Name	Type	Default value	Description
minLength	number	8	Override the minimum required password length
allowedSpecialChar	string	!@#$%^&*(),.?":{}<>\[\]\\/`~;'_+=-	Override the allowed special characters

Contributing

Get started here.