InputPassword

Use InputPassword to let shoppers enter a password. It adds a show/hide toggle, an optional error message, and a password-strength status indicator built on the Input and Field components.

Import

import { InputPassword } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
name	string	No	The field name, used for form data. Defaults to ‘password’.
placeholder	string	No	Placeholder text. Defaults to ‘Password’.
floatingLabel	string	No	Label text that floats above the field. Defaults to ‘Password’.
defaultValue	string	No	The initial value of the password field.
required	boolean	No	Mark the field as mandatory.
errorMessage	string | undefined	No	A custom error message to display below the field.
autoComplete	string	No	Enables browser autocomplete.
hideStatusIndicator	boolean	No	Hide the password-strength status indicator. Defaults to false.
onValue	(value: any) => void	No	Called with the trimmed value when it changes (debounced).
onBlur	(event: Event) => void	No	Called when the field loses focus.

InputPassword also accepts the PasswordStatusIndicator props that configure the strength indicator: minLength and requiredCharacterClasses set which requirements the indicator shows (the length row appears when minLength is greater than 0; the character-classes row appears when requiredCharacterClasses is 2 or more), while validateLengthConfig and uniqueSymbolsStatus set each requirement’s status. It renders as a <div> and accepts standard HTML attributes such as id and className.

Example

Render a required password field with a strength indicator.

import { InputPassword, provider } from '/@dropins/tools/components.js';

await provider.render(InputPassword, {
  name: 'password',
  required: true,
  minLength: 8,
  requiredCharacterClasses: 2,
  onValue: (value) => yourSavePassword(value),
})(document.querySelector('.password-input'));

Related

• Input — the text input this component builds on.
• Field — wraps a control with a label and error message.