Accessible password field with optional show and hide controls.
Change any prop and inspect the server-rendered component immediately.
<TogglePassword
name="toggle-password-1"
value="Northstar!2026"
maxlength="128"
fields='[]'
/>Compare configurations and resize the browser to check responsive behavior.
Live inline visibility button example with accessible visibility controls and copyable component code.
<TogglePassword
name="toggle-password-1"
value="Northstar!2026"
maxlength="128"
fields='[]'
/>Live checkbox-controlled toggle example with accessible visibility controls and copyable component code.
<TogglePassword
label="Checkbox-controlled toggle"
name="toggle-password-2"
value="Northstar!2026"
maxlength="128"
fields='[]'
toggleMode="checkbox"
/>Live synchronized password fields example with accessible visibility controls and copyable component code.
<TogglePassword
label="Passwords"
name="toggle-password-3"
maxlength="128"
fields='[
{
"label": "New password",
"name": "new-password",
"placeholder": "Enter new password",
"autocomplete": "new-password"
},
{
"label": "Current password",
"name": "current-password",
"value": "Northstar!2026",
"autocomplete": "current-password"
}
]'
/>Live without visibility toggle example with accessible visibility controls and copyable component code.
<TogglePassword
label="Without visibility toggle"
name="toggle-password-4"
maxlength="128"
fields='[]'
toggleable="false"
/>Live supporting help text example with accessible visibility controls and copyable component code.
<TogglePassword
label="Supporting help text"
name="toggle-password-5"
maxlength="128"
fields='[]'
helpText="Use at least eight characters and avoid passwords used on other sites."
/>Live required validation example with accessible visibility controls and copyable component code.
<TogglePassword
label="Required validation"
name="toggle-password-6"
minlength="8"
maxlength="128"
fields='[]'
required="true"
/>Live disabled password example with accessible visibility controls and copyable component code.
<TogglePassword
label="Disabled password"
name="toggle-password-7"
maxlength="128"
fields='[]'
disabled="true"
/>Live read-only password example with accessible visibility controls and copyable component code.
<TogglePassword
label="Read-only password"
name="toggle-password-8"
value="Northstar!2026"
maxlength="128"
fields='[]'
readonly="true"
/>Live large password field example with accessible visibility controls and copyable component code.
<TogglePassword
size="lg"
label="Large password field"
name="toggle-password-9"
maxlength="128"
fields='[]'
/>Live toggle events example with accessible visibility controls and copyable component code.
<TogglePassword
label="Toggle events"
name="toggle-password-10"
maxlength="128"
fields='[]'
/>Events are declared with @event, bubble from the component root, and expose their state through event.detail.
@inputFires whenever the password value receives user input.@changeFires when the password field commits a changed value.@toggleFires after password visibility changes.const component = document.querySelector("[data-wrn-toggle-password]")
component.addEventListener("toggle", (event) => {
console.log(event.detail.value)
console.log(event.detail.complete)
})
component.addEventListener("input", (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 | "Enter your password" | No |
autocomplete | string | "current-password" | No |
minlength | string | "" | No |
maxlength | string | "" | No |
pattern | string | "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" | No |
fields | string | [] | No |
visible | boolean | false | No |
toggleable | boolean | true | No |
toggleMode | string | "button" | No |
checkboxLabel | string | "Show password" | No |
showLabel | string | "Show password" | No |
hideLabel | string | "Hide password" | No |
disabled | boolean | false | No |
readonly | boolean | false | No |
required | boolean | false | No |
invalid | boolean | false | No |
helpText | string | "" | No |
validationMessage | string | "" | No |
class | string | "" | No |