On this page

Angular Form Components

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

CoreUI’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (ex., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for documentation on required classes, form layout, and more.

<form cForm>
  <div class="mb-3">
    <label cLabel for="inputEmail-1">Email address</label>
    <input cFormControl id="inputEmail-1" type="email">
    <div cFormText>
      We'll never share your email with anyone else
    </div>
  </div>
  <div class="mb-3">
    <label cLabel for="inputPassword-1">Password</label>
    <input cFormControl id="inputPassword-1" type="password">
  </div>
  <c-form-check class="mb-3">
    <input cFormCheckInput id="checkMeOut-1" type="checkbox">
    <label cFormCheckLabel for="checkMeOut-1">Check me out</label>
  </c-form-check>
  <input cButton color="primary" type="submit">
</form>

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  ButtonDirective,
  FormCheckComponent,
  FormCheckInputDirective,
  FormCheckLabelDirective,
  FormControlDirective,
  FormDirective,
  FormLabelDirective,
  FormTextDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-overview01',
  templateUrl: './overview01.component.html',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    FormsModule,
    FormDirective,
    FormLabelDirective,
    FormControlDirective,
    FormTextDirective,
    FormCheckComponent,
    FormCheckInputDirective,
    FormCheckLabelDirective,
    ButtonDirective
  ]
})
export class Overview01Component {}

Form text

Block-level or inline-level form text can be created using cFormText.

Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be styled with cFormText. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

<form cForm>
  <div class="mb-3">
    <label cLabel="" for="inputPassword-2">Password</label>
    <input aria-describedby="passwordHelpBlock-2" cFormControl id="inputPassword-2" type="password">
    <span cFormText id="passwordHelpBlock-2">
      Your password must be 8-20 characters long, contain letters and numbers, and must not
      contain spaces, special characters, or emoji.
    </span>
  </div>
</form>

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

@Component({
  selector: 'docs-overview02',
  templateUrl: './overview02.component.html',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    FormsModule,
    FormDirective,
    FormLabelDirective,
    FormControlDirective,
    FormTextDirective
  ]
})
export class Overview02Component {}

Inline text can use any typical inline HTML element (be it a span, small, or something else) with nothing more than the .form-text class.

<form cForm>
  <c-row [gutter]="3" class="align-items-center">
    <c-col xs="auto">
      <label cLabel="col" for="inputPassword-3"> Password </label>
    </c-col>
    <c-col xs="auto">
      <input
        aria-describedby="passwordHelpInline-3"
        cFormControl
        id="inputPassword-3"
        type="password">
    </c-col>
    <c-col xs="auto">
      <span cFormText id="passwordHelpInline-3">
        Must be 8-20 characters long.
      </span>
    </c-col>
  </c-row>
</form>

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

@Component({
  selector: 'docs-overview03',
  templateUrl: './overview03.component.html',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    FormsModule,
    FormDirective,
    RowComponent,
    GutterDirective,
    ColComponent,
    FormLabelDirective,
    FormControlDirective,
    FormTextDirective
  ]
})
export class Overview03Component {}

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Disabled input

<label cLabel>Disabled input</label>
<input cFormControl type="text" placeholder="Disabled input here..." disabled >

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

@Component({
  selector: 'docs-overview04',
  templateUrl: './overview04.component.html',
  standalone: true,
  imports: [FormLabelDirective, FormControlDirective]
})
export class Overview04Component {}

Add the disabled attribute to a fieldset to disable all the controls within. Browsers treat all native form controls (input, select, and button elements) inside a fieldset disabled as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as button, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.

<form cForm>
  <fieldset disabled>
    <div class="mb-3">
      <label cLabel for="disabledTextInput-5">Disabled input</label>
      <input cFormControl id="disabledTextInput-5" type="text" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label cLabel for="disabledSelect-5">Disabled select</label>
      <select id="disabledSelect-5" cSelect disabled>
        <option>Open this select menu</option>
        <option>Disabled select</option>
        <option>Two</option>
        <option>Three</option>
      </select>
    </div>
    <c-form-check class="mb-3">
      <input cFormCheckInput id="disabledFieldsetCheck-5" type="checkbox">
      <label cFormCheckLabel for="disabledFieldsetCheck-5">Can't touch this</label>
    </c-form-check>
    <input cButton type="submit" color="">
  </fieldset>
</form>

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  ButtonDirective,
  FormCheckComponent,
  FormCheckInputDirective,
  FormCheckLabelDirective,
  FormControlDirective,
  FormDirective,
  FormLabelDirective,
  FormSelectDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-overview05',
  templateUrl: './overview05.component.html',
  standalone: true,
  imports: [ReactiveFormsModule, FormsModule, FormDirective, FormLabelDirective, FormControlDirective, FormSelectDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonDirective]
})
export class Overview05Component {}

API reference

Form Module

import { FormModule } from '@coreui/angular';

@NgModule({
   imports: [FormModule,]
})
export class AppModule() { }

cFormText

directive