Input Group

    The Ignite UI for Angular controls can easily be used in Reactive Forms that provide a model-driven approach for handling form inputs.

    Angular Input Group Example

    Usage

    To get started with the Input Group component, first you need to import the IgxInputGroupModule from the igniteui-angular toolkit.

    Note that the IgxInputGroup also depends on the FormsModule in order to have a working Template Driven Form:

    // app.module.ts
    
    ...
    import { IgxInputGroupModule } from 'igniteui-angular';
    // import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        ...
        imports: [..., IgxInputGroupModule, FormsModule],
        ...
    })
    export class AppModule {}
    
    Note

    To use any of the directives igxInput, igxLabel, igx-prefix, igx-suffix or igx-hint, you have to wrap them in an <igx-input-group> container.

    Examples

    Label & Input

    You can read about the igxLabel and igxInput directives as well as their validation, data binding and API in a separate topic here.

    Prefix & Suffix

    The igx-prefix or igxPrefix and igx-suffix or igxSuffix directives can contain or be attached to HTML elements, strings, icons or even other components. In the following sample we will create a new input field with a string prefix and an icon suffix:

    <igx-input-group>
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input igxInput name="phone" type="tel" />
        <igx-icon igxSuffix>phone</igx-icon>
    </igx-input-group>
    

    Hints

    The igx-hint directive provides a helper text placed below the input. It can be at the beginning or at the end of the input depending on the value of the position property. Let's add a hint to our phone input:

    <igx-input-group>
        <igx-prefix>+359</igx-prefix>
        <label igxLabel for="phone">Phone</label>
        <input igxInput name="phone" type="tel" />
        <igx-suffix>
            <igx-icon>phone</igx-icon>
        </igx-suffix>
        <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
    </igx-input-group>
    

    This is how the phone field with hint looks:

    Input Types & Input Group Type Token

    The input group styles can be altered by using the type property of the igxInputGroup component. The input group component supports the following types: line (default if type is not specified), border, box, and search. The line, border, and box types are made specifically for the Material Design themes. Setting those types with other themes will not have any effect on how the input group looks. An example of setting a specific type declaratively:

    <igx-input-group type="border">
    

    Using the IGX_input-group_TYPE injection token allows to specify a type on an application level for all input-group instances. It provides an easy way to style all related components at once. To set the type, use the IGX_input-group_TYPE injection token to create a DI provider.

    providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]
    
    Note

    The type property has precedence over a IGX_INPUT_GROUP_TYPE, thus a token value can be overridden on a component level if the type property is set explicitly. Most of the igniteui-angular form controls use input-group component internally, or allow for a custom template. Setting a global token will affect these components as well.

    Ignite UI for Angular also provides styling for the input of type="file" and it supports all the input group types and themes, just add this to your template:

    <igx-input-group>
        <input igxInput type="file" multiple />
    </igx-input-group>
    

    Input Group Theme

    The input group component supports several themes - material, fluent, bootstrap, and indigo-design; The theme is automatically set during component initialization and is inferred from the currently used stylesheet. If you plan to support several themes in your application with runtime switching, you can explicitly set the theme using the theme Input property.

    <igx-input-group theme="fluent">...</igx-input-group>
    

    Typed Forms

    The Ignite UI for Angular Input Group component can be used inside strictly typed reactive forms which are the default ones as of Angular 14. To find out more about the typed forms, you can check Angular official documentation.

    Styling

    The first thing we need to do, in order to get started with the input group styling, is to include the index file in our style file:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    Next, we have to create a new theme that extends the input-group-theme and pass the parameters which we'd like to change:

    $custom-input-group: input-group-theme(
      $filled-text-color: #288a54,
      $focused-text-color: #174f30,
      $idle-text-color: #288a54,
      $idle-bottom-line-color: #288a54,
      $interim-bottom-line-color: #288a54,
      $hover-bottom-line-color: #288a54,
      $focused-secondary-color: #174f30,
      $box-background: #eeeeee
    );
    

    Using CSS variables

    The last step is to include the newly created theme:

    @include css-vars($custom-input-group);
    

    Using Theme Overrides

    In order to style components for older browsers, like Internet Explorer 11, we have to use the input group mixin, since it doesn't support CSS variables.

    However, if we just leave the include statement, as shown in the previous step, our styles will not properly apply - while our text color has properly changed, the bottom border and the background remain the same. This is because our component is using the Emulated ViewEncapsulation. The input and label elements are part of that view, so their styles are applied correctly. The bottom border, on the other hand, is generated by the igx-input-group component and is not affected by the styles of our component.

    In order to style the border, we have to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, we also need to make sure that we scope the styles with a :host selector before the ::ng-deep:

    :host {
        ::ng-deep {
            @include input-group($custom-input-group);
        }
    }
    

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.