Password

Password displays strength indicator for password fields.

Basic

Password Meter

Show Password

Templating

Import via Module


import { Password } from 'primereact/password';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/password/password.min.js"></script>

Getting Started

Password is used as a controlled component with value and onChange properties.


<Password value={value} onChange={(e) => setValue(e.target.value)} />

KeyFilter

Password has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

Properties

Password accepts all valid properties of an input element in addition the the custom properties below.

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
inputId	string	null	Identifier of the input element.
promptLabel	string	Please enter a password	Text to prompt password entry.
weakLabel	string	Weak	Text for a weak password.
mediumLabel	string	Medium	Text for a medium password.
strongLabel	string	Strong	Text for a strong password.
mediumRegex	string	^(((?=.[a-z])(?=.[A-Z]))\|((?=.[a-z])(?=.[0-9]))\|((?=.[A-Z])(?=.[0-9])))(?=.{6,}).	Regex for a medium level password.
strongRegex	string	^(?=.[a-z])(?=.[A-Z])(?=.*[0-9])(?=.{8,})	Regex for a strong level password.
feedback	boolean	true	Whether to show the strength indicator or not.
toggleMask	boolean	false	Whether to show an icon to display the password as plain text.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
header	any	null	Template of panel header if "feedback" is enabled.
content	any	null	Template of panel content if "feedback" is enabled.
footer	any	null	Template of panel footer if "feedback" is enabled.
icon	any	null	Template of mask icon if "toggleMask" is enabled.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.
style	object	null	Inline style of the element.
className	string	null	Style class of the element.
inputStyle	any	null	Inline style of the input field.
inputClassName	string	null	Style class of the input field.
panelClassName	string	null	Style class of the overlay panel element.
panelStyle	string	null	Inline style of the overlay panel element.
keyfilter	string/regex	null	Format definition of the keys to block.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onShow	-	Callback to invoke when overlay becomes visible.
onHide	-	Callback to invoke when overlay becomes hidden.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-password	Container element
p-password-input	Input Element
p-password-panel	Container of password panel
p-password-meter	Meter element of password strength
p-password-info	Text to display strength