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>
        <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 :invalid="value === null"  />

When disabled is present, the element cannot be edited and focused.


<Password disabled placeholder="Disabled" />

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.