Angular Form Control

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

On this page

## Example

### Sizing Set heights using `size` property like `sizing="lg"` and `sizing="sm"`.

### Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.

### Readonly Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

### Readonly plain text If you want to have `input readonly` elements in your form styled as plain text, use the `plaintext` boolean property to remove the default form field styling and preserve the correct margin and padding.

### File input

### Color

--- ## API reference ### Form Module --- ### cFormControl _directive_ Works with `input` and `textarea` html tags. ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `plaintext` | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use alongside `readonly`. | `boolean` | _undefined_ | | `sizing` | Size the label small or large. | `sm` \| `lg` |_undefined_| | `type` | Specifies the html type of input element. | `InputType` except `checkbox` and `radio` |_text_| | `valid` | Sets input validation state to valid. | `boolean` | _undefined_ |

--- ### cLabel _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `cLabel` | For horizontal forms set labels to `col` and make them vertically centered with their associated form controls. | `col` | _undefined_ | | `sizing` | Size the label small or large. | `sm` \| `lg` |_undefined_|