Password
new 2.4 kB<hk-password>A password field that tells the user what it wants before they get it wrong. Strength is the count of satisfied rules rather than a function of length — twelve lowercase characters are not strong, and saying so does real harm — which also means the meter and the checklist can never disagree. Caps Lock is surfaced as a warning, because it is the most common reason a correct password is rejected and the browser will not mention it.
#password#strength#security#form#reveal
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Model value. Supports [(value)], or use it as a form control. |
| meter | boolean | true | Shows the segmented strength meter. |
| rules | 'default' | PasswordRule[] | 'default' | The rule set scored and listed. Supply your own to match a policy. |
| showRules | boolean | true | Lists the rules live, rather than only failing on submit. |
| toggle | boolean | true | Shows the reveal control. |
| capsLockWarning | boolean | true | Warns while Caps Lock is on. |
| generate | boolean | false | Offers a generated password from crypto.getRandomValues. |
| minScore | number | 3 | Rules that must pass before the control validates. |
Outputs
scoredEventEmitter<number>Fires with the rule count whenever the value changes.
revealedChangeEventEmitter<boolean>Fires when the reveal state is toggled.
Keyboard
- Alt+Shift+V Toggles reveal without leaving the field
- Tab Reaches the reveal control after the input
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-pw-weak | #dc2626 | Meter fill at the bottom of the scale. |
| --hk-pw-fair | #f59e0b | Meter fill mid-scale. |
| --hk-pw-strong | #10b981 | Meter fill at the top of the scale. |
| --hk-pw-track | rgb(15 23 42 / 0.10) | Unfilled meter segment. |
Accessibility
- The meter is a progressbar with aria-valuetext carrying the word, not the number — "Fair" is what matters, not 3.
- Reveal is a toggle button with aria-pressed, so its state is announced rather than inferred from an icon.
- The Caps Lock warning is role="status", announced without stealing focus mid-typing.
- Rules are described by aria-describedby, so the requirements are read with the field rather than hunted for.
- Revealing never re-creates the input, so the caret position and any selection survive the toggle.