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" />

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" />
</form>

Meter #

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


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

Locale #

Labels are translated at component level by promptLabel, weakLabel, mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the locale


<p-password 
    [(ngModel)]="value" 
    promptLabel="Choose a password"
    weakLabel="Too simple" 
    mediumLabel="Average complexity" 
    strongLabel="Complex password" />

Toggle Mask #

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


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

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 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. Visit FloatLabel documentation for more information.

Password


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

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


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

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" />

Disabled #

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


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

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 #

Screen Reader

Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, ariaLabel 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 inputId="pwd1" />

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

<p-password ariaLabel="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.

Password #

Password displays strength indicator for password fields.

Properties #

Defines the input properties of the component.

name	type	default	description
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.
label	string	null	Label of the input for accessibility.
disabled	boolean	false	Indicates whether the component is disabled or not.
promptLabel	string	null	Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
mediumRegex	string	^(((?=.[a-z])(?=.[A-Z]))\|((?=.[a-z])(?=.[0-9]))\|((?=.[A-Z])(?=.[0-9])))(?=.{6,})	Regex value for medium regex.
strongRegex	string	^(?=.[a-z])(?=.[A-Z])(?=.*[0-9])(?=.{8,})	Regex value for strong regex.
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.
maxLength	number	null	specifies the maximum number of characters allowed in the input element.
strongLabel	string	null	Text for a strong password. Defaults to PrimeNG I18N API configuration.
inputId	string	null	Identifier of the accessible input element.
feedback	boolean	true	Whether to show the strength indicator or not.
appendTo	any	null	Id of the element or "body" for document where the overlay should be appended to.
toggleMask	boolean	false	Whether to show an icon to display the password as plain text.
inputStyleClass	string	null	Style class of the input field.
styleClass	string	null	Style class of the element.
style	Object	null	Inline style of the component.
inputStyle	Object	null	Inline style of the input field.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.
autocomplete	string	null	Specify automated assistance in filling out password by browser.
placeholder	string	null	Advisory information to display on input.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.
variant	"outlined" \| "filled"	outlined	Specifies the input variant of the component.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onFocus	event : Event	Callback to invoke when the component receives focus.
onBlur	event : Event	Callback to invoke when the component loses focus.
onClear	value : any	Callback to invoke when clear button is clicked.

Templates #

Defines the templates used by the component.

name	parameters	description
header		Custom template of header.
content		Custom template of content.
footer		Custom template of footer.
clearicon		Custom template of clear icon.
hideicon		Custom template of hide icon.
showicon		Custom template of show icon.

PasswordDirective #

Password directive.

Properties #

Defines the input properties of the component.

name	type	default	description
promptLabel	string	Enter a password	Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
weakLabel	string	Weak	Text for a weak password. Defaults to PrimeNG I18N API configuration.
mediumLabel	string	Medium	Text for a medium password. Defaults to PrimeNG I18N API configuration.
strongLabel	string	Strong	Text for a strong password. Defaults to PrimeNG I18N API configuration.
feedback	boolean	true	Whether to show the strength indicator or not.
showPassword	-	null	Sets the visibility of the password field.
variant	"outlined" \| "filled"	outlined	Specifies the input variant of the component.