Angular Password Input CoreUI

On this page

Introduced in Pro 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

### 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

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabled` | Toggle the `disabled` state for the input. | `boolean` | _false_ | | `floatingLabel` | Floating label for the input. | `string` | _undefined_ |\ | `readOnly` | Toggle the `readonly` state for the input. | `boolean` | _false_ | | `sizing` | Size of the input. | `lg \| sm` | _undefined_ | | `showPassword` | Show password toggle. | `boolean` | _false_ | | `valid` | Validation state of the input. | `boolean \| undefined` | _undefined_ | | `ariaLabelToggler` | Aria label for the show password toggle. | `string` | _Toggle password visibility_ |