ThecFormPassword 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 thesizing prop to control the height and padding of the input. Available options:

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

Disabled

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

Readonly

Use thereadOnly 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 thefloatingLabel 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 thevalid prop to indicate the validation status of the input. Set it totrue for valid,false for invalid, or leave itundefined 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 ourcFormPassword directive.

API reference

Form Module

Form Password Standalone

cFormPassword

directive

Inputs