PasswordInput
v1.0.11Updated 4 Oct 2026Password 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
Preview
Live · 12 stories▸Why this is recommendedformpasswordvalidationstrength+5
The default, out-of-the-box PasswordInput.
- ✓Signup forms
- ✓Password reset flows
- ✓Account-security settings
- 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
- ✕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.
Usage
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
placeholderField placeholder. Also a `labels` key now, so a translated screen no longer has to know to pass this prop — PasswordConfirmInput forwards passwordOptions, which hid it one level further (fb_cedb53a8). The prop still wins when both are given.
—valueControlled value
—onValueChangeValue change callback
—minLengthMin length (default 12)
—requireUppercaseDefault true
—requireLowercaseDefault true
—requireDigitDefault true
—requireSpecialDefault false
—blockCommonBlock top-50 common passwords (default true)
—customRulesAdditional rules
—showStrengthMeterRender the 4-segment meter
—showRulesRender the rule checklist
—showGeneratorShow the wand-style generator button
—labelsOverride built-in UI strings (i18n)
—aria-invalidMark the field invalid from outside; the box paints the same destructive state as its own validation, with the alert in its own trailing slot (FormField clones this in from its error prop)
—aria-describedbyId(s) of outside hint or error text, kept alongside the messages the field owns (FormField clones this in)
—aria-requiredMark the input required for assistive tech (FormField clones this in from its required prop)
—aria-labelAccessible name where the layout has no room for a visible `label` — a filter row, a subscribe box beside its button. Prefer `label`: a visible one names the field for everybody. These components destructure a fixed prop set and used to DROP an aria-label a caller wrote, so such a field announced as nothing but its role.
—