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.

Password

File input

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

Color

Color picker

#26ab3c

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