Angular Password Input directive

The cFormPassword is a fully featured Angular password input field built with Bootstrap and CoreUI. It includes built-in password visibility toggling, sm / lg sizing options, and support for disabled, readOnly, and form validation states. Ideal for login forms, signup screens, and any secure input in your Angular app.

Examples

Sizing

Use the sizing prop to control the height and padding of the input. Available options:

• sizing="sm" – small input
• sizing="lg" – large input

Disabled

Add the disabled attribute to make the password input uneditable. This also dims the field to indicate it's inactive.

Readonly

Use the readOnly prop to make the input non-editable while still allowing the text to be copied. Unlike disabled, it keeps the default cursor.

Floating Label

Use the floatingLabel prop to add a floating label to the password input. This is useful for forms where you want to save space and keep the label visible when the user interacts with the field.

Validation status

Use the valid prop to indicate the validation status of the input. Set it to true for valid, false for invalid, or leave it undefined for default styling.

Forms

Angular handles password input through reactive forms and template-driven forms. CoreUI Password Input directive supports both.

Customizing

SASS variables

Angular CoreUI Password Input directive use Sass variables for enhanced customization.

• $input-* are shared across most of our form controls (and not buttons).
• $form-password-* are for our cFormPassword directive.

API reference

Form Module

Form Password Standalone

cFormPassword

directive

Inputs