Password

Password displays strength indicator for password fields.

Import #


import { PasswordModule } from 'primeng/password';

Basic #

Two-way value binding is defined using ngModel.



<p-password [(ngModel)]="value" [feedback]="false"></p-password>

Reactive Forms #

Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.



<form [formGroup]="formGroup">
    <p-password formControlName="value" [feedback]="false"></p-password>
</form>

Meter #

Strength meter is displayed as a popup while a value is being entered.



<p-password [(ngModel)]="value"></p-password>

Toggle Mask #

When toggleMask is present, an icon is displayed to show the value as plain text.



<p-password [(ngModel)]="value" [toggleMask]="true"></p-password>

Template #

3 templates are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.



<p-password [(ngModel)]="value">
    <ng-template pTemplate="header">
        <h6>Pick a password</h6>
    </ng-template>
    <ng-template pTemplate="footer">
        <p-divider></p-divider>
        <p class="mt-2">Suggestions</p>
        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
            <li>At least one lowercase</li>
            <li>At least one uppercase</li>
            <li>At least one numeric</li>
            <li>Minimum 8 characters</li>
        </ul>
    </ng-template>
</p-password>

Float Label #

A floating label appears on top of the input field when focused.

Password



<span class="p-float-label">
    <p-password [(ngModel)]="value" [feedback]="false"></p-password>
    <label for="password">Password</label>
</span>

Invalid #

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.



<p-password [(ngModel)]="value" class="ng-invalid ng-dirty"></p-password>

Disabled #

When disabled is present, the element cannot be edited and focused.



<p-password [(ngModel)]="value" [disabled]="true"></p-password>

Style #

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

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility #

Screen Reader

Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing.


<label for="pwd1">Password</label>
<p-password> id="pwd1"></p-password>

<span id="pwd2">Password</span>
<p-password> aria-labelledby="pwd2"></p-password>

<p-password> aria-label="Password"></p-password>

Keyboard Support

Key	Function
tab	Moves focus to the input.
escape	Hides the strength meter if open.

Password API

API defines helper props, events and others for the PrimeNG Password module.

Properties #

Name	Type	Default	Description
promptLabel	string	null	Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
mediumRegex	string	Regex for a medium level password.	^(((?=.[a-z])(?=.[A-Z]))\|((?=.[a-z])(?=.[0-9]))\|((?=.[A-Z])(?=.[0-9])))(?=.{6,}).
strongRegex	string	Regex for a strong level password.	^(?=.[a-z])(?=.[A-Z])(?=.*[0-9])(?=.{8,})
weakLabel	string	null	Text for a weak password. Defaults to PrimeNG I18N API configuration.
mediumLabel	string	null	Text for a medium password. Defaults to PrimeNG I18N API configuration.
strongLabel	string	null	Text for a strong password. Defaults to PrimeNG I18N API configuration.
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	string	null	Id of the element or "body" for document where the overlay should be appended to.
inputStyle	any	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.
inputId	string	null	Identifier of the accessible input element.
style	string	null	Inline style of the component.
style	string	null	Inline style of the element.
panelStyle	string	null	Inline style of the overlay panel element.
styleClass	string	null	Style class of the element.
panelStyleClass	string	null	Style class of the overlay panel element.
placeholder	string	null	Advisory information to display on input.
label	string	null	Label of the input for accessibility.
ariaLabel	string	null	Defines a string that labels the input for accessibility.
ariaLabelledBy	string	null	Specifies one or more IDs in the DOM that labels the input field.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
maxLength	number	null	specifies the maximum number of characters allowed in the input element.

Events #

Name	Parameters	Description
onBlur	event: Blur event	Callback to invoke on blur of input field.
onFocus	event: Focus event	Callback to invoke on focus of input field.
onClear	-	Callback to invoke when input field is cleared.

Templates #

Name	Parameters
header	-
content	-
footer	-
clearicon	-
hideicon	-
showicon	-