Password input
Masked text input with a show / hide toggle. Aligned with J&J DS v1.2 (Figma 20985:14520). Pair with PasswordStrengthMeter on sign-up flows for live requirement feedback.
Default — sign-in style
Masked by default. The eye toggle reveals the value temporarily; it's announced to assistive tech via aria-pressed.
Show sourceHide source
<Field label="Password">
<PasswordInput placeholder="Enter your password" autoComplete="current-password" />
</Field>With strength meter — sign-up style
Use PasswordStrengthMeter to render rule checklist + 4-segment strength bar. Provide your own requirements via the `requirements` prop, or use the defaults.
Password must contain:
- At least 8 characters
- At least 1 uppercase letter
- At least 1 number
- At least 1 special character
Show sourceHide source
const [pwd, setPwd] = useState("");
<Field label="Choose a password">
<PasswordInput value={pwd} onChange={(e) => setPwd(e.target.value)} />
</Field>
<PasswordStrengthMeter value={pwd} />Error state
Surface server-side errors via the Field's status + message.
Incorrect password — try again
Show sourceHide source
<Field label="Password" status="error" message="Incorrect password — try again">
<PasswordInput defaultValue="hunter2" />
</Field>Disabled / read-only
Show sourceHide source
<Field label="Auth method" disabled><PasswordInput defaultValue="********" /></Field>
<Field label="Recovery code"><PasswordInput readOnly defaultValue="ABCD-1234" /></Field>Custom requirements
Pass a custom `requirements` array to enforce app-specific rules (e.g. minimum length, no common words, etc.).
Custom rules:
- At least 12 characters
- Mixed case (upper + lower)
- Includes a number
Show sourceHide source
<PasswordStrengthMeter
value={pwd}
requirements={[
{ id: "len", label: "At least 12 characters", test: (p) => p.length >= 12 },
{ id: "mixed", label: "Mixed case", test: (p) => /[a-z]/.test(p) && /[A-Z]/.test(p) },
{ id: "num", label: "Includes a number", test: (p) => /\d/.test(p) },
]}
/>