build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  PasswordInput

PasswordInput

v1.0.6Updated 27 Aug 2026

Password field with configurable rules (min length default 12, upper/lower/digit/special), top-50 common-password blocklist, 4-segment strength meter (Weak/Fair/Good/Strong), rule checklist, visibility toggle, and option

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedformpasswordvalidationstrength+5

The default, out-of-the-box PasswordInput.

Recommended for+14
  • ✓Signup forms
  • ✓Password reset flows
  • ✓Account-security settings
Tags+6
formpasswordvalidationstrengthmeterrulesgeneratorblocklistdefault
Features+4
  • Configurable rules (minLength, requireUppercase / lowercase / digit / special)
  • Top-50 common-password blocklist (COMMON_PASSWORDS)
  • 4-segment strength meter (Weak / Fair / Good / Strong)
  • Live rule checklist
  • Visibility (eye) toggle
  • Secure 16-char mixed-charset generator (showGenerator)
  • Custom rules (additive) with errorMessages overrides
  • i18n: labels prop overrides strength captions, rule-checklist labels, and button aria-labels
Not recommended for−2
  • ✕Login (no rules / meter needed — use Input type="password")
  • ✕Plain text input (use Input)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "PasswordInput" })

Usage

import { PasswordInput } from '@/components/inputs/password-input';

<PasswordInput
  label="Password"
  value={pwd}
  onValueChange={setPwd}
  required
  minLength={12}
  requireSpecial
  showGenerator
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled value

string—
onValueChange

Value change callback

function—
minLength

Min length (default 12)

number—
requireUppercase

Default true

boolean—
requireLowercase

Default true

boolean—
requireDigit

Default true

boolean—
requireSpecial

Default false

boolean—
blockCommon

Block top-50 common passwords (default true)

boolean—
customRules

Additional rules

PasswordRule[]—
showStrengthMeter

Render the 4-segment meter

boolean—
showRules

Render the rule checklist

boolean—
showGenerator

Show the wand-style generator button

boolean—
labels

Override built-in UI strings (i18n)

Partial<PasswordInputLabels>—

Related

Platform docsAll componentsSource files