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 #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>

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

    <Password v-model="value" inputId="password" />
    <label for="password">Password</label>

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

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

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