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
vue

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
vue

Validation

Show code
vue

Disabled State

Show code
vue

Reacting to other inputs

Show code
vue

#<AddonInputPassword>

•Model

v-model
The password input.
Show example
vue

•Properties

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

•Events

@validation
Show example
vue
@visibility
Show example
vue

•Slots

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

•Exposed

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