Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

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 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.

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.

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

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.

--- ## API reference ### Form Module ```typescript import { FormModule } from '@coreui/angular'; @NgModule({ imports: [FormModule,] }) export class AppModule() { } ``` --- ### cFormText _directive_