Label & Input

The Ignite UI for Angular Label directive is used to add additional CSS styles to single-line text elements. It is especially useful when combined with the Ignite UI for Angular Input directive with which you can add inputs in your markup.

Label & Input Demo

Create account


To get started with the Ignite UI for Angular Label and Input, let's first import the IgxLabelModule and IgxInputModule in our app.module.ts file:

// app.module.ts

import { IgxLabelModule } from 'igniteui-angular/main';
import { IgxInputModule } from 'igniteui-angular/main';

    imports: [..., IgxLabelModule],
    imports: [..., IgxInputModule],
export class AppModule {}

Then in the template of our account component we can add the following code to get the styled label and input. The key thing here is to add the igx-form-group class to the div that contains tha label and input and put the label after the input:


<div class="igx-form-group">
    <input igxInput [..options]/>
    <target-element igxLabel [..options]>First Name</target-element>    

Additional Resources

Our community is active and always welcoming to new ideas.