PasswordPassword displays strength indicator for password fields.
Documentation
Import
import {PasswordModule} from 'primeng/password';
Getting Started
Password is applied to an input field with pPassword directive.
<input type="password" pPassword />
Model Binding
A model can be bound using standard ngModel directive.
<input type="password" pPassword [(ngModel)]="property"/>
Properties
Name | Type | Default | Description |
---|---|---|---|
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. |
feedback | boolean | true | Whether to show the strength indicator or not. |
showPassword | boolean | false | When true, change the input type to text by displaying the password. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-password-panel | Container of password panel |
ui-password-meter | Meter element of password strength |
ui-password-info | Text to display strength |
Dependencies
None.
Source
<h3 class="first">Password</h3>
<input pPassword type="password"/>