import Password from 'primevue/password';
Two-way value binding is defined using v-model.
<Password v-model="value" :feedback="false" />
Strength meter is displayed as a popup while a value is being entered.
<Password v-model="value" />
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.
<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
When toggleMask is present, an icon is displayed to show the value as plain text.
<Password v-model="value" toggleMask />
3 slots are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
<Password v-model="value">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer>
<Divider />
<p class="mt-2 p-0 mb-2">Suggestions</p>
<ul class="p-0 pl-2 m-0 ml-2 list-disc leading-6" 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>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<Password invalid />
When disabled is present, the element cannot be edited and focused.
<Password disabled placeholder="Disabled" />
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. |