Advanced Forms component

Strong Password

Theme-aware, responsive strong password component.

27 props0 slots3 outputsTheme readyResponsive

Interactive playground

Configure Strong Password

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

Live preview

Live strength meter

Password strength Strong

Component code

<StrongPassword
  label="Live strength meter"
  name="strong-password-1"
  value="Northstar!2026"
  showRequirements="false"
/>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Strength feedback

Live strength meter

Live live strength meter example with accessible scoring feedback and copyable component code.

Live preview

Live strength meter

Password strength Strong

Component usage.wrn

<StrongPassword
  label="Live strength meter"
  name="strong-password-1"
  value="Northstar!2026"
  showRequirements="false"
/>

Strength feedback

Requirements and hint text

Live requirements and hint text example with accessible scoring feedback and copyable component code.

Live preview

Requirements and hint text

Password strength Enter a password

At least 8 characters
One lowercase letter
One uppercase letter
One number
One special character: !@#$%^&*()_+-=[]{}|;:,.<>?

Use a unique password you do not use for another account.

Component usage.wrn

<StrongPassword
  label="Requirements and hint text"
  name="strong-password-2"
  hintText="Use a unique password you do not use for another account."
/>

Strength feedback

Requirements in a popover

Live requirements in a popover example with accessible scoring feedback and copyable component code.

Live preview

Component usage.wrn

<StrongPassword
  label="Requirements in a popover"
  name="strong-password-3"
  presentation="popover"
/>

Configuration

Custom special characters

Live custom special characters example with accessible scoring feedback and copyable component code.

Live preview

Custom special characters

Password strength Enter a password

At least 8 characters
One lowercase letter
One uppercase letter
One number
One special character: @#_-.

Component usage.wrn

<StrongPassword
  label="Custom special characters"
  name="strong-password-4"
  specialCharactersSet="@#_-."
/>

Configuration

Optional requirements

Live optional requirements example with accessible scoring feedback and copyable component code.

Live preview

Optional requirements

Password strength Enter a password

At least 8 characters
One lowercase letter
One uppercase letter
One number

Component usage.wrn

<StrongPassword
  label="Optional requirements"
  name="strong-password-5"
  requireSpecialCharacter="false"
/>

Configuration

Disabled password strength

Live disabled password strength example with accessible scoring feedback and copyable component code.

Live preview

Disabled password strength

Password strength Enter a password

At least 8 characters
One lowercase letter
One uppercase letter
One number
One special character: !@#$%^&*()_+-=[]{}|;:,.<>?

Component usage.wrn

<StrongPassword
  label="Disabled password strength"
  name="strong-password-6"
  disabled="true"
/>

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.

@strengthFires when the calculated password-strength state changes.

Declarative handlers.wrn

<StrongPassword
  @input='console.log(payload)'
  @change='console.log(payload)'
  @strength='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"StrongPassword\"], [data-component=\"StrongPassword\"]")

if (component) registerOutputHandler(component, "input", (payload) => {
  console.log("input", payload)
})

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "strength", (payload) => {
  console.log("strength", payload)
})

Component API

Props and configuration

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