Password Input

Props

• label: string (required) -- accessible name for the input via aria-label
• value: string (default: "") -- current password value; bindable with two-way binding
• autocomplete: string (default: "current-password") -- autocomplete hint for password managers
• required: boolean (default: false) -- whether the input is required
• disabled: boolean (default: false) -- whether the input is disabled
• ...restProps: unknown -- additional attributes spread onto the <input> element

Keyboard Interactions

Standard text input keyboard interactions provided natively by <input type="password">.

ARIA

• aria-label={label} -- provides an accessible name for the password input

When to Use

• Use whenever you need users to create a new password or enter an existing password
• Use with autocomplete="new-password" for password creation and autocomplete="current-password" for sign-in
• Use with the show/hide toggle so users can verify their password before submitting
• Use with spellcheck="false" and autocapitalize="off" to prevent spell-jacking and unwanted capitalisation

When Not to Use

• Do not use for MFA codes, one-time passwords, or PINs -- use PinInputDiv or TextInput instead
• Do not use for security question answers or other sensitive non-password fields -- use TextInput
• Do not use when you need a combined show/hide toggle with a confirmation field -- use PasswordInputOrTextInputDiv

Headless

This headless component renders a native <input type="password"> element with aria-label, two-way bindable value, and autocomplete support. The consumer provides all visual styling including sizing, borders, and focus states.

Styles

The consumer provides all CSS styling. The component renders with a .password-input class for targeting. Common styling includes matching the visual style of other text inputs in the form.

Testing

• Verify the component renders an <input> element with type="password"
• Verify aria-label is set from the label prop
• Verify autocomplete defaults to "current-password"
• Verify disabled and required attributes propagate correctly
• Verify pass-through attributes are applied

Advice

• Designers: Ensure the password input matches the visual style of other form inputs. Consider using a lock icon or label to clearly indicate the field requires a password.
• Developers: Set autocomplete to "new-password" for registration forms to help password managers distinguish between login and signup flows.

Implementation Notes

• Renders a native <input type="password"> element for secure text entry
• Uses aria-label for an accessible name describing the input purpose
• The value prop uses two-way binding with an initial empty string state
• Includes autocomplete="current-password" for browser password manager integration
• Supports required and disabled boolean states
• Spreads restProps onto the input for consumer customization

Related components

• password-input-or-text-input-div — an input for entering a password <input type="password"> or text <input type="text"> with show/hide toggle
• text-input — a single-line text input field <input type="text">
• pin-input-div — a series of single-digit inputs for entering a PIN or OTP code

References

• MDN input type="password": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
• HTML autocomplete attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete