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='[]'
/>payload.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='[]'
/>Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@inputFires as the editable value changes.@changeFires when the component's committed value or selection changes.@toggleFires when the component changes between open and closed or on and off states.<TogglePassword
@input='console.log(payload)'
@change='console.log(payload)'
@toggle='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"TogglePassword\"], [data-component=\"TogglePassword\"]")
if (component) registerOutputHandler(component, "input", (payload) => {
console.log("input", payload)
})
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})
if (component) registerOutputHandler(component, "toggle", (payload) => {
console.log("toggle", payload)
})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 | unknown[] | [] | 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 |