Documentation
Documentation Hub

Password Input

Ready to use password input component with validation and formatting. The component extend the <BaseInput> component, so you can use all the props and events of the base component.

This component uses zxcvbn-ts to detect and validate the password input strength.
Show code

Change the locale

Changing the locale allows to change the language of the password strength feedback and the dictionaries used to validate the password.

You can install and load dictionaries from the zxcvbn-ts package or create your own dictionary.

Show code

Validation

Show code

Disabled State

Show code

Reacting to other inputs

Show code

#<AddonInputPassword>

Model¶

v-model
The password input.
Show example

Properties¶

user-inputs
The user inputs to include in the calculation.
Show example
locale
The locale to use for the feedback strings and dictionary.
Show example
rounded
The radius of the input.
Show example
show
Whether the password is visible or not by default.
Show example
touched
Whether the input has been touched or not, this is used to show the feedback.
Show example
disabled
Show example

Events¶

@validation
Show example
@visibility
Show example

Slots¶

#help
Show example
#action
Show example
#default
Show example

Exposed¶

validation
Show example
showPassword
Show example
toggleVisibility
Show example
inputRef
Show example