Password Input — Input Controls

Minimal Example

{
  "id": "password",
  "type": "password",
  "label": "Password",
  "required": true,
  "width": "half",
  "binding": {
    "source": "$json",
    "path": "account.password"
  }
}

Settings Reference

Setting	Type	Default	Description
`showToggle`	boolean	true	Render show/hide eye icon button in input suffix
`showStrengthMeter`	boolean	false	Render the PasswordStrengthMeter component below the field
`strengthLevels`	object	built-in	Override the score thresholds and labels for each strength band
`placeholder`	string	—	Placeholder ghost text (masked)
`autocomplete`	string	`current-password`	HTML autocomplete value; use `"new-password"` for registration
`minLength`	number	—	Minimum password length enforced by the strength meter and validation

Password Strength Meter

When showStrengthMeter: true, the PasswordStrengthMeter component renders below the input showing a colour-coded bar and label. Strength is evaluated using zxcvbn-style heuristics:

Score	Label	Colour	Description
0	Too weak	Red	Trivial patterns, common words, short
1	Weak	Orange	Simple variations, under 8 chars
2	Fair	Yellow	Mixed case or numbers, 8+ chars
3	Good	Blue	Mixed case + numbers, 10+ chars
4	Strong	Green	Mixed case + numbers + symbols, 12+ chars

{
  "id": "new-password",
  "type": "password",
  "label": "New Password",
  "required": true,
  "settings": {
    "showStrengthMeter": true,
    "showToggle": true,
    "autocomplete": "new-password",
    "minLength": 8
  },
  "validation": {
    "required": true,
    "minLength": 8,
    "pattern": "^(?=.*[A-Z])(?=.*[0-9]).{8,}$",
    "patternMessage": "Password must contain at least one uppercase letter and one number"
  }
}

Confirm-Password Pattern

Pair two password fields to require the user to confirm their chosen password. Use the built-in matchesField validator:

// Field 1: New password
{
  "id": "new-password",
  "type": "password",
  "label": "New Password",
  "required": true,
  "width": "half",
  "order": 1,
  "settings": {
    "showStrengthMeter": true,
    "autocomplete": "new-password"
  },
  "validation": {
    "required": true,
    "minLength": 8
  }
},

// Field 2: Confirm password
{
  "id": "confirm-password",
  "type": "password",
  "label": "Confirm Password",
  "required": true,
  "width": "half",
  "order": 2,
  "settings": {
    "showToggle": true,
    "showStrengthMeter": false,
    "autocomplete": "new-password"
  },
  "validation": {
    "required": true,
    "customRule": "matchesField",
    "customRuleOptions": {
      "fieldId": "new-password",
      "message": "Passwords do not match"
    }
  }
}

View Mode Behaviour

Password fields are always hidden in view and preview modes regardless of modeVisibilitySettings. This is a security default. The field renders as •••••••• in admin mode when the admin panel needs to acknowledge that a password was set, but never exposes the actual value.

Never store plaintext passwords The password field value should be hashed before being sent to your API. Use the onSubmit action handler or a custom submit action to hash the value before the HTTP call. The form stores and transmits the raw string as typed — hashing is the responsibility of your action handler.

Strength Level Customisation

{
  "id": "pin",
  "type": "password",
  "label": "PIN",
  "settings": {
    "showStrengthMeter": true,
    "strengthLevels": {
      "0": { "label": "Too short", "color": "#ef4444" },
      "1": { "label": "Weak PIN", "color": "#f97316" },
      "2": { "label": "Acceptable", "color": "#eab308" },
      "3": { "label": "Good PIN", "color": "#22c55e" },
      "4": { "label": "Strong PIN", "color": "#16a34a" }
    }
  },
  "validation": {
    "required": true,
    "pattern": "^\\d{6,}$",
    "patternMessage": "PIN must be at least 6 digits"
  }
}

← Email Input Next: URL Input →