PasswordInputProps

Properties

aria-describedby?

"aria-describedby"?: string;

ids of external error/help text. Merged with the ids this component owns.

aria-label?

"aria-label"?: string;

Accessible name, when there is no visible text to point label at. Wins over label if both are given.

autoComplete?

autoComplete?: string;

Password managers key off this.

Default

‘current-password’ Set 'new-password' on sign-up and change-password forms.

autoFocus?

autoFocus?: boolean;

Focus the field on mount.

Default

false

blocklist?

blocklist?: string[];

Extra low-entropy strings to reject, e.g. your product name.

capsLockLabel?

capsLockLabel?: ReactNode;

Text of the Caps Lock warning.

Default

'Caps Lock is on'

capsLockWarning?

capsLockWarning?: boolean;

Warn while Caps Lock is on.

Default

true

checkCompromised?

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

Parameter	Type
`password`	`string`
`signal`	`AbortSignal`

Returns

Promise<boolean>

checkCompromisedDelay?

checkCompromisedDelay?: number;

Debounce before checkCompromised runs, in ms.

Default

className?

className?: string;

compromisedLabel?

compromisedLabel?: ReactNode;

Message shown when checkCompromised resolves true.

Default

a stock sentence

defaultRevealed?

defaultRevealed?: boolean;

Initial reveal state for the uncontrolled case.

Default

false

defaultValue?

defaultValue?: string;

Uncontrolled initial password. Ignored when value is provided.

disabled?

disabled?: boolean;

estimate?

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

Parameter	Type
`password`	`string`

Returns

PasswordStrength

Default

the built-in estimateStrength

hideOnBlur?

hideOnBlur?: boolean;

Re-mask when focus leaves the field, so a revealed password does not sit on screen after the user tabs away.

Default

true

hideRevealToggle?

hideRevealToggle?: boolean;

Drop the reveal button entirely.

Default

false

id?

id?: string;

Base id; the input, meter, checklist and warnings derive ids from it.

invalid?

invalid?: boolean;

Sets aria-invalid and data-invalid on the field.

label?

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?

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

minLength?

minLength?: number;

Minimum length for the default rule and the native minlength.

Default

minScore?

minScore?:
  | PasswordScore
  | null;

Minimum score to count as valid. null disables the gate.

Default

null

name?

name?: string;

onBlur?

onBlur?: (event) => void;

Parameters

Parameter	Type
`event`	`FocusEvent`<`HTMLElement`>

Returns

void

onChange?

onChange?: (value) => void;

Parameters

Parameter	Type
`value`	`string`

Returns

void

onFocus?

onFocus?: (event) => void;

Parameters

Parameter	Type
`event`	`FocusEvent`<`HTMLElement`>

Returns

void

onRevealChange?

onRevealChange?: (revealed) => void;

Parameters

Parameter	Type
`revealed`	`boolean`

Returns

void

onValidityChange?

onValidityChange?: (valid) => void;

Fires whenever overall validity changes — all required rules met and minScore reached.

Parameters

Parameter	Type
`valid`	`boolean`

Returns

void

onWarn?

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

Parameter	Type
`warning`	`PasswordWarning`

Returns

void

placeholder?

placeholder?: string;

readOnly?

readOnly?: boolean;

required?

required?: boolean;

revealed?

revealed?: boolean;

Controlled reveal state. Omit to let the component own it.

revealIcon?

revealIcon?: ReactNode | ((state) => ReactNode);

Custom reveal-button contents.

Default

a built-in eye glyph

revealLabel?

revealLabel?: string | ((state) => string);

Accessible name for the reveal button.

Default

'Show password' / 'Hide password'

rules?

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?

showRules?: boolean;

Render the requirement checklist.

Default

rules was provided

showStrength?

showStrength?: boolean;

Render the strength meter.

Default

false

strengthLabel?

strengthLabel?: (strength) => ReactNode;

Label under the meter for a score.

Parameters

Parameter	Type
`strength`	`PasswordStrength`

Returns

ReactNode

Default

'Very weak' … 'Strong'

style?

style?: CSSProperties;

userInputs?

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?

value?: string;

Controlled password.