Password
Password displays strength indicator for password fields.
Import #
import Password from 'primevue/password';
Basic #
Password is used with the v-model property for two-way value binding.
<Password v-model="value" :feedback="false" />
Forms #
InputText is used with the v-model property.
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
<div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" fluid />
<template v-if="$form.password?.invalid">
<Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
</template>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
Meter #
Strength meter is displayed as a popup while a value is being entered.
<Password v-model="value" />
Locale #
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" />
ToggleMask #
When toggleMask is present, an icon is displayed to show the value as plain text.
<Password v-model="value" toggleMask />
Template #
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">Reset Password</div>
</template>
<template #footer>
<Divider />
<ul class="pl-2 my-0 leading-normal text-sm">
<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>
Float Label #
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
<FloatLabel>
<Password v-model="value1" inputId="over_label" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<Password v-model="value2" inputId="in_label" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<Password v-model="value3" inputId="on_label" />
<label for="on_label">On Label</label>
</FloatLabel>
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
<IftaLabel>
<Password v-model="value" inputId="password" variant="filled" />
<label for="password">Password</label>
</IftaLabel>
Clear Icon #
When showClear is enabled, a clear icon is added to reset the Password.
<Password v-model="value" :feedback="false" showClear inputClass="w-56" />
Sizes #
Password provides small and large sizes as alternatives to the base.
<div class="card flex flex-col items-center gap-4">
<Password v-model="value1" size="small" placeholder="Small" />
<Password v-model="value2" placeholder="Normal" />
<Password v-model="value3" size="large" placeholder="Large" />
</div>
Fluid #
The fluid prop makes the component take up the full width of its container when set to true.
<Password v-model="value" :feedback="false" fluid />
Filled #
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" />
Disabled #
When disabled is present, the element cannot be edited and focused.
<Password disabled placeholder="Disabled" />
Invalid #
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="value1" :invalid="!value1" placeholder="Password" />
<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
Accessibility #
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
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
| escape | Hides the strength meter if open. |
