Password

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 || '&nbsp;' }}</small>
            <Button type="submit" label="Submit" />
        </form>
        <Toast />
    </div>
</template>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-password-panelContainer of password panel
p-password-meterMeter element of password strength
p-password-infoText to display strength

Screen Reader

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"/>

Keyboard Support

KeyFunction
tabMoves focus to the input.
escapeHides the strength meter if open.