Installation
Usage
Toggle Visibility
Add a button to toggle the visibility of the password.
Copy
Add a button to copy the secret to the clipboard.
Both
You can also add both a visibility toggle and a copy button and they will play nicely.
Strength
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.
API Reference
Password.
Root
The root container for the password input suite.
| Prop | Type | Default |
|---|---|---|
ref? $bindable | HTMLDivElement | null |
hidden? $bindable | boolean | true |
minScore? | enum | 3 |
children? | Snippet | - |
Password.
Input
The password input field.
| Prop | Type | Default |
|---|---|---|
ref? $bindable | HTMLInputElement | null |
value? $bindable | string | - |
children? | Snippet | - |
Password.
ToggleVisibility
A button to toggle password visibility.
Documentation for this component's props can be found at bits-ui Toggle
Password.
Copy
A button to copy the password value to the clipboard.
Documentation for this component's props can be found at Copy Button
Password.
Strength
A meter that visually indicates password strength.
| Prop | Type | Default |
|---|---|---|
strength? $bindable | ZxcvbnResult | - |