InputPassword
InputPassword is an enhanced input for password entry with strength metering, mask toggling, and controlled or uncontrolled usage.
Usage #
Examples #
Basic #
InputPassword is applied to an input element with the pInputPassword directive.
Toggle Mask #
Adding a toggle icon to show or hide the password, allowing users to verify their input.
Requirements #
Password requirements checklist with real-time validation feedback.
- At least 12 characters
- Contains uppercase letter
- Contains lowercase letter
- Contains number
- Contains special character
Strength Meter #
Visualize the overall password strength with an animated progress bar and a severity-based label that adapts as the password improves.
Popover #
Combine a visibility toggle, strength meter, and requirements checklist into a fully custom password creation with Popover component.
Float Label #
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Clear Icon #
Use a custom clear action to reset the password input.
Fluid #
Fluid spans the full width of the container.
Sizes #
InputPassword provides small and large sizes as alternatives to the base.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Forms #
Signal Forms #
Template Driven #
Reactive Forms #
Accessibility #
Screen Reader
InputPassword is applied to a native input element so it implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input. |