Theme-aware, responsive strong password component.
Change any prop and inspect the server-rendered component immediately.
<StrongPassword
label="Live strength meter"
name="strong-password-1"
value="Northstar!2026"
showRequirements="false"
/>Compare configurations and resize the browser to check responsive behavior.
Live live strength meter example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Live strength meter"
name="strong-password-1"
value="Northstar!2026"
showRequirements="false"
/>Live requirements and hint text example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Requirements and hint text"
name="strong-password-2"
hintText="Use a unique password you do not use for another account."
/>Live requirements in a popover example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Requirements in a popover"
name="strong-password-3"
presentation="popover"
/>Live custom special characters example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Custom special characters"
name="strong-password-4"
specialCharactersSet="@#_-."
/>Live optional requirements example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Optional requirements"
name="strong-password-5"
requireSpecialCharacter="false"
/>Live disabled password strength example with accessible scoring feedback and copyable component code.
<StrongPassword
label="Disabled password strength"
name="strong-password-6"
disabled="true"
/>Events are declared with @event, bubble from the component root, and expose their state through event.detail.
@inputFires as the password value changes.@changeFires when the password input commits a change.@strengthFires with the current score, percentage, and strength level.const component = document.querySelector("[data-wrn-strong-password]")
component.addEventListener("select", (event) => {
console.log(event.detail.value)
console.log(event.detail.complete)
})
component.addEventListener("load", (event) => {
console.log(event.detail)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
label | string | "Password" | No |
name | string | "password" | No |
value | string | "" | No |
placeholder | string | "Create a strong password" | No |
autocomplete | string | "new-password" | No |
minLength | number | 8 | No |
specialCharactersSet | string | "!@#$%^&*()_+-=[]{}|;:,.<>?" | No |
requireLowercase | boolean | true | No |
requireUppercase | boolean | true | No |
requireNumber | boolean | true | No |
requireSpecialCharacter | boolean | true | No |
showRequirements | boolean | true | No |
presentation | string | "inline" | No |
hintText | string | "Use a unique password you do not use elsewhere." | No |
emptyLabel | string | "Enter a password" | No |
weakLabel | string | "Weak" | No |
fairLabel | string | "Fair" | No |
goodLabel | string | "Good" | No |
strongLabel | string | "Strong" | No |
disabled | boolean | false | No |
readonly | boolean | false | No |
required | boolean | false | No |
invalid | boolean | false | No |
validationMessage | string | "" | No |
class | string | "" | No |