How to create Password Checklist in ReactJS ?
Last Updated :
13 Nov, 2023
The password checklist in the React JS app is a list of password validation steps or conditions that should be fulfilled. These conditions are automatically checked when the password is input in the input field.
Prerequisites:
Approach too create Password Checklist:
To add our checklist we are going to use the react-password-checklist package. The react-password-checklist package helps us to integrate the password checklist into our app. So first, we will install the react-password-checklist package and then we will add a checklist on our homepage.
Steps to Create ReactJS Application:
Step 1: You can create a new ReactJS project using the below command:
npx create-react-app gfg
Step 2: Move to the project directory,
cd gfg
Step 3: Now we will install the react-password-checklist package using the below command
npm i react-password-checklist
Project Structure:

The updated list of dependencies in package.json file.
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-password-checklist": "^1.5.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Example: This example implements a password check list using the react-password-checklist package.
App.js
// Filename - App.js
import React, { useState } from "react";
import PasswordChecklist from "react-password-checklist";
export default function PasswordGfg() {
const [password, setPassword] = useState("");
const [passwordAgain, setPasswordAgain] = useState("");
return (
<form>
<h3>ReactJs Password Checklist</h3>
<label>Password:</label>
<input
type="password"
onChange={(e) =>
setPassword(e.target.value)
}
></input>
<label>Password Again:</label>
<input
type="password"
onChange={(e) =>
setPasswordAgain(e.target.value)
}
></input>
<PasswordChecklist
rules={[
"minLength",
"specialChar",
"number",
"capital",
"match",
]}
minLength={5}
value={password}
valueAgain={passwordAgain}
/>
</form>
);
}
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.
Similar Reads
How to Generate Random Password in ReactJS ? Generating random passwords is basic requirement for applications that has user authentication, registration, or security-related functionalities. In ReactJS, you can create a simple function to generate strong and random passwords for users. In this article, we will guide you through the process of
3 min read
How to show and hide Password in ReactJS? To show and hide passwords in React JS we can simply use the password input with an input to select the show and hide state. The user might need to see what has he used as the password to verify which is an important concept in login and registration forms. We can create this type of password input
3 min read
Create a Password Validator using ReactJS Password must be strong so that hackers can not hack them easily. The following example shows how to check the password strength of the user input password in ReactJS. We will use the validator module to achieve this functionality. We will call the isStrongPassword function and pass the conditions a
2 min read
How to create a form in React? React uses forms to allow users to interact with the web page. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute and that even
5 min read
How To Use Checkboxes in ReactJS? Checkboxes are essential UI components used in web applications that allow users to select one or more options from a list. React makes it simple to work with checkboxes, whether you're dealing with a single checkbox or a list of checkboxes. In this article, we will see how to use Checkboxes in Reac
2 min read
How To Get Multiple Checkbox Values In ReactJS? Handling checkboxes in ReactJS becomes important when creating forms or managing user input. If you need to select multiple options, we can do it by implementing multiple checkboxes. In this article, we'll explore how to get the values of multiple checkboxes in ReactJS, manage the state, and display
4 min read