Label & Input

The Ignite UI for Angular Input and Label directives are used to create single-line or multi-line text elements. They help to cover common scenarios when dealing with form inputs.

Label & Input Demo

Usage

The default styling of the Label and Input directives follows the text fields specification in the Material Design guidelines.

Note

To use igxInput and igxLabel, you have to wrap them in an <igx-input-group> container.

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

// app.module.ts

...
import { IgxInputGroupModule } from 'igniteui-angular';

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

Label & Input

HTML labels and inputs are the core building blocks of the HTML forms. Here is how you can use the igxLabel and igxInput directives:

<igx-input-group>
    <input igxInput name="fullName" type="text" />
    <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

And the result is:

The igxInput directive could be applied to <input> and <textarea> HTML elements. We support both single-line and multi-line text fields.

Validation

Ignite UI for Angular Input directive provides a Material-based styling when you have validation. Let's add required attribute to our input:

<igx-input-group>
    <input igxInput name="fullName" type="text" required="required" />
    <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

In the demonstration of the code below you can see we receive an asterisk next to the label and the input turns green/red when we write in it depending on whether the validation passes/fails.

Data Binding

Ignite UI for Angular Input supports one-way and two-way data-binding. Let's add a two-way data-binding to our input. Here is the code in our component:

public user = {
    fullName: ""
};

and in our markup:

<igx-input-group>
    <input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required" />
    <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

Input Group

You can read about the Input Group component in a separate topic here.

API References

Additional Resources

Related topics:

Our community is active and always welcoming to new ideas.