import Password from 'primevue/password';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/password/password.min.js"></script>
A model can be bound using the standard v-model directive.
<Password v-model="value" />
Password component uses regular expressions for middle and strong passwords with the following defaults.
^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).
^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
It is possible to define your own checks with the mediumRegex and strongRegex properties.
3 slots are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
<Password v-model="value4">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer>
<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>
</template>
</Password>
Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| inputId | string | null | Identifier of the underlying input element. |
| promptLabel | string | null | Text to prompt password entry. Defaults to PrimeVue |
| 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. |
| weakLabel | string | null | Text for a weak password. Defaults to PrimeVue |
| mediumLabel | string | null | Text for a medium password. Defaults to PrimeVue |
| strongLabel | string | null | Text for a strong password. Defaults to PrimeVue |
| 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 | body | A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself. |
| hideIcon | string | pi pi-eye-slash | Icon to hide displaying the password as plain text. |
| showIcon | string | pi pi-eye | Icon to show displaying the password as plain text. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| placeholder | string | null | Placeholder text for the input. |
| required | boolean | false | When present, it specifies that an input field must be filled out before submitting the form. |
| inputId | string | null | Style class of the component input field. |
| inputClass | any | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
| panelId | string | null | Identifier of the underlying overlay panel element. |
| panelClass | string | null | Style class of the overlay panel. |
| panelStyle | string | null | Inline style of the overlay panel. |
| panelProps | object | null | Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
Any valid event such as focus, blur and input are passed to the underlying input element.
| Name | Parameters |
|---|---|
| header | - |
| content | - |
| footer | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-password-panel | Container of password panel |
| p-password-meter | Meter element of password strength |
| p-password-info | Text to display strength |
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>
<Password inputId="pwd1" />
<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />
<Password aria-label="Password"/>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
| escape | Hides the strength meter if open. |
None.