// Generated by scripts/generate-showcase.mjs. Do not edit directly. page TogglePasswordDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Password" state playground_name = ctx.url.searchParams.get("pg_name") ?? "toggle-password-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter your password" state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "current-password" state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? "" state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? "128" state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" state playground_fields = ctx.url.searchParams.get("pg_fields") ?? "[]" state playground_visible = ctx.url.searchParams.get("pg_visible") ?? "false" state playground_toggleable = ctx.url.searchParams.get("pg_toggleable") ?? "true" state playground_toggleMode = ctx.url.searchParams.get("pg_toggleMode") ?? "button" state playground_checkboxLabel = ctx.url.searchParams.get("pg_checkboxLabel") ?? "Show password" state playground_showLabel = ctx.url.searchParams.get("pg_showLabel") ?? "Show password" state playground_hideLabel = ctx.url.searchParams.get("pg_hideLabel") ?? "Hide password" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Toggle Password" description = "Accessible password field with optional show and hide controls." } view {
Advanced Forms component

Toggle Password

Accessible password field with optional show and hide controls.

24 props0 slots3 eventsTheme readyResponsive
Interactive playground

Configure Toggle Password

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<TogglePassword
  name="toggle-password-1"
  value="Northstar!2026"
  maxlength="128"
  fields='[]'
/>
Component props24 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Visibility

Inline visibility button

Live inline visibility button example with accessible visibility controls and copyable component code.

01
Live preview
Component usage.wrn
<TogglePassword
  name="toggle-password-1"
  value="Northstar!2026"
  maxlength="128"
  fields='[]'
/>
Visibility

Checkbox-controlled toggle

Live checkbox-controlled toggle example with accessible visibility controls and copyable component code.

02
Live preview
Component usage.wrn
<TogglePassword
  label="Checkbox-controlled toggle"
  name="toggle-password-2"
  value="Northstar!2026"
  maxlength="128"
  fields='[]'
  toggleMode="checkbox"
/>
Visibility

Synchronized password fields

Live synchronized password fields example with accessible visibility controls and copyable component code.

03
Live preview
Component usage.wrn
<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"
    }
  ]'
/>
Visibility

Without visibility toggle

Live without visibility toggle example with accessible visibility controls and copyable component code.

04
Live preview
Component usage.wrn
<TogglePassword
  label="Without visibility toggle"
  name="toggle-password-4"
  maxlength="128"
  fields='[]'
  toggleable="false"
/>
Forms & states

Supporting help text

Live supporting help text example with accessible visibility controls and copyable component code.

05
Live preview
Component usage.wrn
<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."
/>
Forms & states

Required validation

Live required validation example with accessible visibility controls and copyable component code.

06
Live preview
Component usage.wrn
<TogglePassword
  label="Required validation"
  name="toggle-password-6"
  minlength="8"
  maxlength="128"
  fields='[]'
  required="true"
/>
Forms & states

Disabled password

Live disabled password example with accessible visibility controls and copyable component code.

07
Live preview
Component usage.wrn
<TogglePassword
  label="Disabled password"
  name="toggle-password-7"
  maxlength="128"
  fields='[]'
  disabled="true"
/>
Forms & states

Read-only password

Live read-only password example with accessible visibility controls and copyable component code.

08
Live preview
Component usage.wrn
<TogglePassword
  label="Read-only password"
  name="toggle-password-8"
  value="Northstar!2026"
  maxlength="128"
  fields='[]'
  readonly="true"
/>
Design & events

Large password field

Live large password field example with accessible visibility controls and copyable component code.

09
Live preview
Component usage.wrn
<TogglePassword
  size="lg"
  label="Large password field"
  name="toggle-password-9"
  maxlength="128"
  fields='[]'
/>
Design & events

Toggle events

Live toggle events example with accessible visibility controls and copyable component code.

010
Live preview
Component usage.wrn
<TogglePassword
  label="Toggle events"
  name="toggle-password-10"
  maxlength="128"
  fields='[]'
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@toggleFires when the component toggles between states.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Password"No
namestring"password"No
valuestring""No
placeholderstring"Enter your password"No
autocompletestring"current-password"No
minlengthstring""No
maxlengthstring""No
patternstring"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"No
fieldsstring[]No
visiblebooleanfalseNo
toggleablebooleantrueNo
toggleModestring"button"No
checkboxLabelstring"Show password"No
showLabelstring"Show password"No
hideLabelstring"Hide password"No
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
helpTextstring""No
validationMessagestring""No
classstring""No
} }