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 IgxInputGroup in our app.module.ts file:

// app.module.ts

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

@NgModule({
    ...
    imports: [..., IgxInputGroup],
    ...
})
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.

Input API

Inputs

Name Type Description
value any The value of the input.

Getters/Setters

Name Type Getter Setter Description
valid IgxInputState Yes No Gets the input validation state. The possible values could be IgxInputState.INITIAL, IgxInputState.VALID, IgxInputState.INVALID.
disabled boolean Yes Yes Gets/Sets the disabled property of the input.
focused boolean Yes No Gets whether the input is currently in focus.

Additional Resources

Related topics:

Our community is active and always welcoming to new ideas.