// 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_icon = ctx.url.searchParams.get("pg_icon") ?? "" 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 = JSON.parse(ctx.url.searchParams.get("pg_fields") ?? "[]") state playground_visible = (ctx.url.searchParams.get("pg_visible") ?? "false") === "true" state playground_toggleable = (ctx.url.searchParams.get("pg_toggleable") ?? "true") === "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") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true" state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_cornerHref = ctx.url.searchParams.get("pg_cornerHref") ?? "" 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.

27 props0 slots3 outputsTheme readyResponsive
Interactive playground

Configure Toggle Password

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

Live preview
Component code
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      name="toggle-password-1"
      value="Northstar!2026"
      maxlength="128"
      fields="{fields}"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props27 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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      name="toggle-password-1"
      value="Northstar!2026"
      maxlength="128"
      fields="{fields}"
    />
  }
}
Visibility

Checkbox-controlled toggle

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

02
Live preview
Component usage.wrn
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Checkbox-controlled toggle"
      name="toggle-password-2"
      value="Northstar!2026"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state 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"
  }
]
  view {
    <TogglePassword
      label="Passwords"
      name="toggle-password-3"
      maxlength="128"
      fields="{fields}"
    />
  }
}
Visibility

Without visibility toggle

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

04
Live preview
Component usage.wrn
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Without visibility toggle"
      name="toggle-password-4"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Supporting help text"
      name="toggle-password-5"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Required validation"
      name="toggle-password-6"
      minlength="8"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Disabled password"
      name="toggle-password-7"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Read-only password"
      name="toggle-password-8"
      value="Northstar!2026"
      maxlength="128"
      fields="{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
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      size="lg"
      label="Large password field"
      name="toggle-password-9"
      maxlength="128"
      fields="{fields}"
    />
  }
}
Design & events

Toggle events

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

010
Live preview
Component usage.wrn
page TogglePasswordExample {
  state fields = []
  view {
    <TogglePassword
      label="Toggle events"
      name="toggle-password-10"
      maxlength="128"
      fields="{fields}"
    />
  }
}
Component outputs

Receive every typed component output

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.
Declarative handlers.wrn
<TogglePassword
  @input='console.log(payload)'
  @change='console.log(payload)'
  @toggle='console.log(payload)'
/>
Direct output handlers.js
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)
})
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
iconstring""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
fieldsunknown[][]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
cornerHintstring""No
cornerHrefstring""No
classstring""No
} }