On this page

Angular Form Control Components

Angular input and textarea components. Give textual form controls like `input` and `textarea` an upgrade with custom styles, sizing, focus states, and more.

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