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 customizeddisplays for a more consistent rendering across browsers and devices.
Be sure to use an appropriatetype attribute on all inputs (ex.,email for email address ornumber for numericalinformation) 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, formlayout, and more.
<form cForm> <div> <label cLabel for="inputEmail-1">Email address</label> <input cFormControl type="email"> <div cFormText> We'll never share your email with anyone else </div> </div> <div> <label cLabel for="inputPassword-1">Password</label> <input cFormControl type="password"> </div> <c-form-check> <input cFormCheckInput 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 usingcFormText.
Associating form text with form controls Form text should be explicitly associated with the form control it relates tousing thearia-describedby attribute. This will ensure that assistive technologies—such as screen readers—willannounce this form text when the user focuses or enters the control.
Form text below inputs can be styled withcFormText. If a block-level element will be used, a top margin is addedfor easy spacing from the inputs above.
<form cForm> <div> <label cLabel="" for="inputPassword-2">Password</label> <input aria-describedby="passwordHelpBlock-2" cFormControl type="password"> <span cFormText> 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 aspan,small, or something else) with nothing morethan the.form-text class.
<form cForm> <c-row [gutter]="3"> <c-col xs="auto"> <label cLabel="col" for="inputPassword-3"> Password </label> </c-col> <c-col xs="auto"> <input aria-describedby="passwordHelpInline-3" cFormControl type="password"> </c-col> <c-col xs="auto"> <span cFormText> 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 thedisabled boolean attribute on an input to prevent user interactions and make it appear lighter.
<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 afieldset to disable all the controls within. Browsers treat all native form controls(input,select, andbutton elements) inside afieldset disabled as disabled, preventing both keyboard andmouse interactions on them.
However, if your form also includes custom button-like elements such asbutton, these will only be given a style ofpointer-events: none, meaning they are still focusable and operable using the keyboard. In this case, you mustmanually modify these controls by addingtabindex="-1" to prevent them from receiving focus andaria-disabled="disabled" to signal their state to assistive technologies.
<form cForm> <fieldset disabled> <div> <label cLabel for="disabledTextInput-5">Disabled input</label> <input cFormControl type="text" placeholder="Disabled input"> </div> <div> <label cLabel for="disabledSelect-5">Disabled select</label> <select cSelect disabled> <option>Open this select menu</option> <option>Disabled select</option> <option>Two</option> <option>Three</option> </select> </div> <c-form-check> <input cFormCheckInput 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