Use the following composition to build a Password field:
Add a button to toggle the visibility of the password.
Add a button to copy the secret to the clipboard.
You can also add both a visibility toggle and a copy button and they will play nicely.
Add a strength meter to the password input using zxcvbn-ts
When a password is too weak (as determined by the minScore prop) the input is marked as invalid and users will be unable to submit the form.
The root container for the password input suite.
The password input field.
| Prop | Type | Default |
|---|---|---|
ref? $bindable | HTMLInputElement | null |
value? $bindable | string | - |
children? | Snippet | - |
A button to toggle password visibility.
A button to copy the password value to the clipboard.
A meter that visually indicates password strength.
| Prop | Type | Default |
|---|---|---|
strength? $bindable | ZxcvbnResult | - |