Forms
VeePasswordInput
A password input with a show/hide toggle, an optional strength bar and an optional requirements checklist, powered by Vee-Validate.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
User form
VeePasswordInput works like VeeInput: give it a name and it registers itself with the parent useForm. Validation rules come from your schema (or the rules prop), so the requirements list is purely visual feedback unless your schema enforces the same rules.
Strength bar and requirements
Enable show-strength for the bar and show-requirements for the checklist. Both are off by default and can be used independently. With no requirements prop, all five built-in criteria are checked.
Enter a password. Must contain:
- At least 8 characters - Requirement not met
- At least 1 special character - Requirement not met
- At least 1 number - Requirement not met
- At least 1 lowercase letter - Requirement not met
- At least 1 uppercase letter - Requirement not met
Choose your criteria
Pass built-in keys to requirements to check only what you need. Here only the length and special character criteria are used, and min-length changes the length threshold. The strength bar scales to however many criteria you pass.
Built-in keys: length, special, number, lowercase, uppercase.
Must contain:
- At least 12 characters - Requirement not met
- At least 1 special character - Requirement not met
Strength bar only
Use show-strength on its own to hide the checklist.
Use a mix of letters, numbers and symbols
Enter a password
Custom requirements
Mix built-in keys with your own { text, test } objects. test can be a RegExp or a function that receives the password and returns a boolean.
Enter a password. Must contain:
- At least 8 characters - Requirement not met
- At least 1 number - Requirement not met
- No spaces - Requirement not met
- Not a common password - Requirement not met
Without the toggle and with an icon
Set :show-toggle="false" to remove the show/hide button. The icon prop works like it does on VeeInput.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showStrength | boolean | false | Show the strength bar and label. |
showRequirements | boolean | false | Show the requirements checklist. |
showToggle | boolean | true | Show the show/hide password button. |
requirements | (PasswordRequirementKey | PasswordRequirement)[] | ["length", "special", "number", "lowercase", "uppercase"] | Criteria to check. Built-in keys or { text, test } objects. |
minLength | number | 8 | Minimum length for the built-in length criterion. |
All other props (label, labelHint, hint, icon, name, rules, placeholder, required, disabled, validateOnMount, modelValue) behave the same as on VeeInput. Extra attributes are forwarded to the underlying UiInput.
Slots
| Slot | Description |
|---|---|
icon | Replaces the leading icon. |
toggle | Replaces the icon inside the show/hide button. Receives visible. |
hint | Replaces the hint text. Receives errorMessage and value. |
errorMessage | Replaces the error message. Receives errorMessage and value. |