PasswordInputProps
Properties
Section titled “Properties”aria-describedby?
Section titled “aria-describedby?”optional aria-describedby?: string;ids of external error/help text. Merged with the ids this component owns.
aria-label?
Section titled “aria-label?”optional aria-label?: string;Accessible name, when there is no visible text to point label at. Wins
over label if both are given.
autoComplete?
Section titled “autoComplete?”optional autoComplete?: string;Password managers key off this.
Default
Section titled “Default”‘current-password’
Set 'new-password' on sign-up and change-password forms.
autoFocus?
Section titled “autoFocus?”optional autoFocus?: boolean;Focus the field on mount.
Default
Section titled “Default”falseblocklist?
Section titled “blocklist?”optional blocklist?: string[];Extra low-entropy strings to reject, e.g. your product name.
capsLockLabel?
Section titled “capsLockLabel?”optional capsLockLabel?: ReactNode;Text of the Caps Lock warning.
Default
Section titled “Default”'Caps Lock is on'capsLockWarning?
Section titled “capsLockWarning?”optional capsLockWarning?: boolean;Warn while Caps Lock is on.
Default
Section titled “Default”truecheckCompromised?
Section titled “checkCompromised?”optional checkCompromised?: (password, signal) => Promise<boolean>;Optional async check against a breach corpus. Called debounced, with an
AbortSignal that fires when the password changes again or the component
unmounts. The library never makes a network request itself — wire this to
a k-anonymity endpoint (or your own service) and keep the plaintext local.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
password | string |
signal | AbortSignal |
Returns
Section titled “Returns”Promise<boolean>
checkCompromisedDelay?
Section titled “checkCompromisedDelay?”optional checkCompromisedDelay?: number;Debounce before checkCompromised runs, in ms.
Default
Section titled “Default”400className?
Section titled “className?”optional className?: string;compromisedLabel?
Section titled “compromisedLabel?”optional compromisedLabel?: ReactNode;Message shown when checkCompromised resolves true.
Default
Section titled “Default”a stock sentencedefaultRevealed?
Section titled “defaultRevealed?”optional defaultRevealed?: boolean;Initial reveal state for the uncontrolled case.
Default
Section titled “Default”falsedefaultValue?
Section titled “defaultValue?”optional defaultValue?: string;Uncontrolled initial password. Ignored when value is provided.
disabled?
Section titled “disabled?”optional disabled?: boolean;estimate?
Section titled “estimate?”optional estimate?: (password) => PasswordStrength;Swap the built-in estimator — pass a zxcvbn adapter here if you want its wordlists and are willing to pay ~350 kB (minified + brotli) for them.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
password | string |
Returns
Section titled “Returns”Default
Section titled “Default”the built-in estimateStrength
hideOnBlur?
Section titled “hideOnBlur?”optional hideOnBlur?: boolean;Re-mask when focus leaves the field, so a revealed password does not sit on screen after the user tabs away.
Default
Section titled “Default”truehideRevealToggle?
Section titled “hideRevealToggle?”optional hideRevealToggle?: boolean;Drop the reveal button entirely.
Default
Section titled “Default”falseoptional id?: string;Base id; the input, meter, checklist and warnings derive ids from it.
invalid?
Section titled “invalid?”optional invalid?: boolean;Sets aria-invalid and data-invalid on the field.
label?
Section titled “label?”optional label?: ReactNode;Accessible name for the field. Not rendered — supply your own visible
<label htmlFor={${id}-input}> when the design calls for one, exactly as
every other input in the suite expects. A node is exposed through a hidden
element, since aria-label only takes a string.
maxLength?
Section titled “maxLength?”optional maxLength?: number;Native maxlength. There is always a cap — an unbounded field lets a
single paste drive unbounded estimator and KDF work — and this prop only
moves it. NIST SP 800-63B requires accepting at least 64 characters, so
the default sits at double that; a value below minLength is
unsatisfiable and falls back to the default rather than removing the cap.
Default
Section titled “Default”128minLength?
Section titled “minLength?”optional minLength?: number;Minimum length for the default rule and the native minlength.
Default
Section titled “Default”8minScore?
Section titled “minScore?”optional minScore?: | PasswordScore | null;Minimum score to count as valid. null disables the gate.
Default
Section titled “Default”nulloptional name?: string;onBlur?
Section titled “onBlur?”optional onBlur?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onChange?
Section titled “onChange?”optional onChange?: (value) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
value | string |
Returns
Section titled “Returns”void
onFocus?
Section titled “onFocus?”optional onFocus?: (event) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | FocusEvent<HTMLElement> |
Returns
Section titled “Returns”void
onRevealChange?
Section titled “onRevealChange?”optional onRevealChange?: (revealed) => void;Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
revealed | boolean |
Returns
Section titled “Returns”void
onValidityChange?
Section titled “onValidityChange?”optional onValidityChange?: (valid) => void;Fires whenever overall validity changes — all required rules met and minScore reached.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
valid | boolean |
Returns
Section titled “Returns”void
onWarn?
Section titled “onWarn?”optional onWarn?: (warning) => void;Called in development whenever a prop is coerced or a configuration looks
wrong — see PasswordWarning. The coerced result still renders, so
this never changes what the user sees. When omitted, the same warnings go
to console.warn. The entire path is stripped from production builds.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
warning | PasswordWarning |
Returns
Section titled “Returns”void
placeholder?
Section titled “placeholder?”optional placeholder?: string;readOnly?
Section titled “readOnly?”optional readOnly?: boolean;required?
Section titled “required?”optional required?: boolean;revealed?
Section titled “revealed?”optional revealed?: boolean;Controlled reveal state. Omit to let the component own it.
revealIcon?
Section titled “revealIcon?”optional revealIcon?: ReactNode | ((state) => ReactNode);Custom reveal-button contents.
Default
Section titled “Default”a built-in eye glyphrevealLabel?
Section titled “revealLabel?”optional revealLabel?: string | ((state) => string);Accessible name for the reveal button.
Default
Section titled “Default”'Show password' / 'Hide password'rules?
Section titled “rules?”optional rules?: PasswordRule[];NIST SP 800-63B leads with length and explicitly advises against composition rules, so the default is a single length rule. Pass your own array to opt into more.
showRules?
Section titled “showRules?”optional showRules?: boolean;Render the requirement checklist.
Default
Section titled “Default”rules was provided
showStrength?
Section titled “showStrength?”optional showStrength?: boolean;Render the strength meter.
Default
Section titled “Default”falsestrengthLabel?
Section titled “strengthLabel?”optional strengthLabel?: (strength) => ReactNode;Label under the meter for a score.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
strength | PasswordStrength |
Returns
Section titled “Returns”ReactNode
Default
Section titled “Default”'Very weak' … 'Strong'style?
Section titled “style?”optional style?: CSSProperties;userInputs?
Section titled “userInputs?”optional userInputs?: string[];Values the user has already typed elsewhere — email, username, name. A password containing any of them is penalised. Nothing leaves the browser.
value?
Section titled “value?”optional value?: string;Controlled password.