Password displays strength indicator for password fields.
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>
<div class="font-semibold text-xm mb-4">Pick a password</div>
</template>
<template #footer>
<Divider />
<ul class="pl-2 ml-2 my-0 leading-normal">
<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>
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
<FloatLabel>
<Password v-model="value" inputId="password" />
<label for="password">Password</label>
</FloatLabel>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<Password v-model="value" :feedback="false" variant="filled" />
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<Password v-model="value" :invalid="value === null" />
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. |