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>
<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>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<Password v-model="value" inputId="password" />
<label for="password">Password</label>
</span>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<Password class="p-invalid" />
When disabled is present, the element cannot be edited and focused.
<Password disabled placeholder="Disabled" />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="value">Password</label>
<Password id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<small class="p-error" id="text-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
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 |
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. |