Angular Form Control Components

Form Control

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

On this page

Example

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

@Component({
  selector: 'docs-form-control',
  templateUrl: './form-control.component.html',
  imports: [ReactiveFormsModule, FormsModule, FormDirective, FormLabelDirective, FormControlDirective]
})
export class FormControlComponent {}

<form cForm>
  <div class="mb-3">
    <label cLabel for="exampleFormControlInput1">Email address</label>
    <input cFormControl
           id="exampleFormControlInput1"
           placeholder="[email protected]"
           type="email"
    />
  </div>
  <div class="mb-3">
    <label cLabel for="exampleFormControlTextarea1">Example textarea</label>
    <textarea cFormControl id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Sizing

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

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

@Component({
  selector: 'docs-form-control-sizing',
  templateUrl: './form-control-sizing.component.html',
  styleUrls: ['./form-control-sizing.component.scss'],
  imports: [FormControlDirective]
})
export class FormControlSizingComponent {}

<input aria-label="lg input example"
       cFormControl
       placeholder="Large input"
       sizing="lg"
       type="text">

<input aria-label="default input example"
       cFormControl
       placeholder="Default input"
       type="text">

<input aria-label="sm input example"
       cFormControl
       placeholder="Small input"
       sizing="sm"
       type="text">

:host input:not(:last-child) {
  margin-bottom: 1.5rem;
}

Disabled

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

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

@Component({
  selector: 'docs-form-control-disabled',
  templateUrl: './form-control-disabled.component.html',
  styleUrls: ['./form-control-sizing.component.scss'],
  imports: [FormControlDirective]
})
export class FormControlDisabledComponent {}

<input aria-label="Disabled input example"
       cFormControl
       disabled
       placeholder="Disabled input"
       type="text">

<input aria-label="Disabled input example"
       cFormControl
       disabled
       placeholder="Disabled readonly input"
       readOnly
       type="text">

:host input:not(:last-child) {
  margin-bottom: 1.5rem;
}

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.

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

@Component({
  selector: 'docs-form-control-readonly',
  templateUrl: './form-control-readonly.component.html',
  imports: [FormControlDirective]
})
export class FormControlReadonlyComponent {}

<input aria-label="readonly input example"
       cFormControl
       placeholder="Readonly input here..."
       readOnly
       type="text">

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.

import { Component } from '@angular/core';
import { ColComponent, ColDirective, FormControlDirective, FormLabelDirective, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-form-control-readonly-plain-text',
  templateUrl: './form-control-readonly-plain-text.component.html',
  imports: [RowComponent, ColDirective, FormLabelDirective, ColComponent, FormControlDirective]
})
export class FormControlReadonlyPlainTextComponent {}

<c-row class="mb-3">
  <label [sm]="2" cCol cLabel="col" for="staticEmail">
    Email
  </label>
  <c-col [sm]="10">
    <input cFormControl id="staticEmail" plaintext readonly type="text" value="[email protected]" />
  </c-col>
</c-row>
<c-row class="mb-3">
  <label cLabel="col" class="col-sm-2" for="inputPassword">
    Password
  </label>
  <c-col [sm]="10">
    <input cFormControl id="inputPassword" type="password" />
  </c-col>
</c-row>

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  ButtonDirective,
  ColComponent,
  FormControlDirective,
  FormDirective,
  FormLabelDirective,
  GutterDirective,
  RowDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-form-control-readonly-plain-text-2',
  templateUrl: './form-control-readonly-plain-text-2.component.html',
  imports: [
    ReactiveFormsModule,
    FormsModule,
    FormDirective,
    RowDirective,
    GutterDirective,
    ColComponent,
    FormLabelDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class FormControlReadonlyPlainText2Component {}

<form [gutter]="3" cForm cRow>
  <c-col xs="auto">
    <label cLabel class="visually-hidden" for="staticEmail2">
      Email
    </label>
    <input [plaintext]="true" cFormControl id="staticEmail2" readonly type="text" value="[email protected]" />
  </c-col>
  <c-col xs="auto">
    <label cLabel class="visually-hidden" for="inputPassword2">
      Password
    </label>
    <input cFormControl id="inputPassword2" placeholder="Password" type="password" />
  </c-col>
  <c-col xs="auto">
    <button cButton type="submit">
      Confirm identity
    </button>
  </c-col>
</form>

File input

import { Component } from '@angular/core';
import { FormControlDirective, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-form-control-file-input',
  templateUrl: './form-control-file-input.component.html',
  imports: [FormLabelDirective, FormControlDirective]
})
export class FormControlFileInputComponent {}

<div class="mb-3">
  <label cLabel for="formFile">Default file input example</label>
  <input cFormControl id="formFile" type="file" />
</div>
<div class="mb-3">
  <label cLabel for="formFileMultiple">Multiple files input example</label>
  <input cFormControl id="formFileMultiple" multiple type="file" />
</div>
<div class="mb-3">
  <label cLabel for="formFileDisabled">Disabled file input example</label>
  <input cFormControl disabled id="formFileDisabled" type="file" />
</div>
<div class="mb-3">
  <label cLabel for="formFileSm">Small file input example</label>
  <input cFormControl id="formFileSm" sizing="sm" type="file" />
</div>
<div>
  <label cLabel for="formFileLg">Large file input example</label>
  <input cFormControl id="formFileLg" sizing="lg" type="file" />
</div>

Color

import { Component, signal } from '@angular/core';
import { NgStyle } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ColComponent, FormControlDirective, FormLabelDirective, RowComponent } from '@coreui/angular';

@Component({
  selector: 'docs-form-control-color',
  templateUrl: './form-control-color.component.html',
  styleUrls: ['./form-control-color.component.scss'],
  imports: [
    RowComponent,
    ColComponent,
    FormLabelDirective,
    FormControlDirective,
    ReactiveFormsModule,
    FormsModule,
    NgStyle
  ]
})
export class FormControlColorComponent {
  readonly favoriteColor = signal('#26ab3c');
}

<c-row class="align-items-center g-2">
  <c-col xs="auto">
    <label cLabel="col" for="exampleColorInput">Color picker</label>
  </c-col>
  <c-col xs="auto">
    <input [(ngModel)]="favoriteColor"
           cFormControl
           id="exampleColorInput"
           title="Choose your color"
           type="color">
  </c-col>
  <c-col xs="auto">
    <div [ngStyle]="{'backgroundColor': favoriteColor()}" class="color-box p-1 m-1"></div>
  </c-col>
  <c-col xs="auto">
    <strong>{{favoriteColor()}}</strong>
  </c-col>
</c-row>

:host {
  #exampleColorInput {
    min-width: 2.5rem;
  }
  .color-box {
    min-width: 2rem;
    min-height: 2rem;
  }
}

API reference

Form Module

cFormControl

directive

Works with input and textarea html tags.

jsx

import { FormControlDirective } from '@coreui/angular'

Property	Default	Type
plaintext	`false`	`boolean`
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`
sizing	`undefined`	`''`, `'sm'`, `'lg'`
Size the component small or large.
type	`'text'`	`Omit<InputType, 'checkbox'`, `'radio'>`
Specifies the type of input element.
valid	`undefined`	`boolean`
Set component validation state to valid.

cLabel

directive

jsx

import { FormLabelDirective } from '@coreui/angular'

Property	Default	Type
cLabel	`''`	`''`, `'col'`
For horizontal forms set labels to 'col' and make them vertically centered with their associated form controls.
sizing	`undefined`	`''`, `'sm'`, `'lg'`
Size the label small or large.