· CoreUI

Password Input

Available in Other JavaScript Frameworks

CoreUI is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Added in v5.4.12

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

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormDirective, FormLabelDirective, FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input',
  imports: [FormDirective, FormPasswordDirective, FormLabelDirective, FormsModule],
  templateUrl: './password-input.component.html'
})
export class PasswordInputComponent {
  readonly secret = signal('SecretPassword');
}

<form cForm>
  <div class="mb-3">
    <label cLabel for="pwd01-0">Password</label>
    <input cFormPassword id="pwd01-0" placeholder="Enter your password">
  </div>
  <div>
    <label cLabel for="pwd01-1">Password with value</label>
    <input cFormPassword id="pwd01-1" name="pwd01-1" [(ngModel)]="secret" placeholder="Enter your password">
  </div>
</form>

Sizing

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

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

import { Component } from '@angular/core';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input-sizing',
  imports: [FormPasswordDirective],
  templateUrl: './password-input-sizing.component.html'
})
export class PasswordInputSizingComponent {}

<input cFormPassword sizing="lg" placeholder="Large password input" aria-label="lg input example" />
<input cFormPassword placeholder="Default password input" aria-label="default input example" />
<input cFormPassword sizing="sm" placeholder="Small password input" aria-label="sm input example" />

Disabled

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

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input-disabled',
  imports: [FormPasswordDirective, FormsModule],
  templateUrl: './password-input-disabled.component.html'
})
export class PasswordInputDisabledComponent {}

<input cFormPassword placeholder="Password" disabled />
<input cFormPassword placeholder="Password" disabled ngModel="Secret" />
<input cFormPassword placeholder="Password" disabled ngModel="Visible" showPassword />

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.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input-readonly',
  imports: [FormPasswordDirective, FormsModule],
  templateUrl: './password-input-readonly.component.html'
})
export class PasswordInputReadonlyComponent {}

<input cFormPassword placeholder="Password" readOnly />
<input cFormPassword placeholder="Password" readOnly ngModel="Secret" />
<input cFormPassword placeholder="Password" readOnly ngModel="Visible" showPassword />

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.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input-floating-label',
  imports: [FormPasswordDirective, FormsModule],
  templateUrl: './password-input-floating-label.component.html'
})
export class PasswordInputFloatingLabelComponent {}

<input cFormPassword floatingLabel="Password" />
<input cFormPassword floatingLabel="Password" ngModel="Secret" />
<input cFormPassword floatingLabel="Password" disabled />
<input cFormPassword floatingLabel="Password" disabled ngModel="Secret" />
<input cFormPassword floatingLabel="Password" readOnly ngModel="Secret" />

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.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  selector: 'docs-password-input-validation-status',
  imports: [FormPasswordDirective, FormsModule],
  templateUrl: './password-input-validation-status.component.html'
})
export class PasswordInputValidationStatusComponent {}

<input cFormPassword placeholder="Password" [valid]="undefined" ngModel="Default" />
<input cFormPassword placeholder="Password" [valid]="true" ngModel="Valid" />
<input cFormPassword placeholder="Password" [valid]="false" ngModel="Invalid" />
<input cFormPassword placeholder="Password" [valid]="true" ngModel="Valid" floatingLabel="Password" />

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.

scss

$form-password-action-bg:         transparent !default;
$form-password-action-hover-bg:   var(--cui-tertiary-bg) !default;
$form-password-icon-show:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M256%2C144.927A103.309%2C103.309%2C0%2C1%2C0%2C359.309%2C248.236%2C103.426%2C103.426%2C0%2C0%2C0%2C256%2C144.927Zm0%2C174.618a71.309%2C71.309%2C0%2C1%2C1%2C71.309-71.309A71.39%2C71.39%2C0%2C0%2C1%2C256%2C319.545Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223c-77.75-77.749-204.258-77.749-282.008%2C0L16%2C233.79v28.893l98.778%2C102.689.218.222a199.409%2C199.409%2C0%2C0%2C0%2C282.008%2C0l99-102.911V233.79ZM464%2C249.79l-89.732%2C93.285a167.409%2C167.409%2C0%2C0%2C1-236.536%2C0L48%2C249.79v-3.107L137.729%2C153.4c65.247-65.13%2C171.3-65.13%2C236.542%2C0L464%2C246.683Z%22%20class%3D%22ci-primary%22/%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20x%3D%22240%22%20y%3D%22232%22%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
$form-password-icon-hide:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223C333.831%2C67.707%2C238.47%2C55.862%2C163.228%2C95.346l23.938%2C23.939c61.571-27.691%2C136.573-16.327%2C187.105%2C34.115L464%2C246.683v3.107l-71.744%2C74.585%2C22.63%2C22.63L496%2C262.683V233.79Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M352.8%2C284.33A103.307%2C103.307%2C0%2C0%2C0%2C219.907%2C151.438L246.1%2C177.63a71.228%2C71.228%2C0%2C0%2C1%2C80.507%2C80.508Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M369.9%2C347.268l-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806c-.083.113-.169.222-.253.334l-99.681-99.681c.112-.083.221-.17.334-.253L191.12%2C167.906c-.108.087-.213.179-.321.266L38.627%2C16H16V38.627l95.689%2C95.689L16%2C233.79v28.893l98.778%2C102.689.218.222A199.732%2C199.732%2C0%2C0%2C0%2C367.372%2C390l106%2C106H496V473.373L392.537%2C369.911Zm-177.157-131.9L288.871%2C311.5a71.28%2C71.28%2C0%2C0%2C1-96.133-96.133ZM137.729%2C343.073%2C48%2C249.79v-3.107l86.319-89.737%2C35.065%2C35.064A103.248%2C103.248%2C0%2C0%2C0%2C312.226%2C334.853l32.007%2C32.007C279.723%2C406.875%2C193.711%2C398.955%2C137.729%2C343.073Z%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
$form-password-icon-color:        var(--cui-tertiary-color) !default;
$form-password-icon-hover-color:  var(--cui-secondary-color) !default;
$form-password-icon-size:         1.25rem !default;
$form-password-icon-size-lg:      1.5rem !default;
$form-password-icon-size-sm:      1rem !default;

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;

$input-bg:                              var(--cui-body-bg) !default;
$input-disabled-color:                  var(--cui-body-color) !default;
$input-disabled-bg:                     var(--cui-secondary-bg) !default;
$input-disabled-border-color:           var(--cui-border-color) !default;

$input-color:                           var(--cui-body-color) !default;
$input-border-color:                    var(--cui-border-color) !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      var(--cui-box-shadow-inset) !default;

$input-border-radius:                   var(--cui-border-radius) !default;
$input-border-radius-sm:                var(--cui-border-radius-sm) !default;
$input-border-radius-lg:                var(--cui-border-radius-lg) !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              tint-color($primary, 50%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               var(--cui-secondary-color) !default;
$input-plaintext-color:                 var(--cui-body-color) !default;

$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-color-width:                      3rem !default;

API reference

Form Module

import { NgModule } from '@angular/core';
import { FormModule } from '@coreui/angular';

@NgModule({
  imports: [FormModule]
})
export class CustomAppModule {}

Form Password Standalone

import { Component } from '@angular/core';
import { FormPasswordDirective } from '@coreui/angular';

@Component({
  template: `<input cFormPassword />`,
  imports: [FormPasswordDirective]
})
export class CustomAppComponent {}

cFormPassword

directive

jsx

import { FormPasswordDirective } from '@coreui/angular-pro'

Property	Default	Type
ariaLabelToggler	`'Toggle password visibility'`	`string`
Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`.
disabled	`false`	`boolean`
Sets disabled state of the password input field. When `true`, the user cannot interact with the field.
floatingLabel	-	`string`
set form labels that float over the password input fields
readOnly	`false`	`boolean`
Disables the password input field. When `true`, the user cannot interact with the field.
showPassword	`false`	`boolean`
Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows toggling password visibility in Angular forms.
sizing	`undefined`	`''`, `'sm'`, `'lg'`
Size the component small or large.
valid	`undefined`	`boolean`
Set component validation state to valid.