Password is used with the v-model property for two-way value binding.

InputText is used with the v-model property.

Strength meter is displayed as a popup while a value is being entered.

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.

When toggleMask is present, an icon is displayed to show the value as plain text.

3 slots are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.

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

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

When showClear is enabled, a clear icon is added to reset the Password.

Password provides small and large sizes as alternatives to the base.

The fluid prop makes the component take up the full width of its container when set to true.

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

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

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

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.

Keyboard Support