Input Group

Input groups in the Ignite UI for Angular controls allow developers to create easy-to-use and aesthetic forms. The user experiences simplicity with inputting data, and the inputs also provide mitigation for handling validation and errors.

Input Group Demo

view on stackblitz

Usage

The default styling of the Input Group component as well as its complimentary directives follow the text fields specification in the Material Design guidelines.

To get started install Ignite UI for Angular by typing the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

Then import all needed modules from the igniteui-angular toolkit as well as the FormsModule in order to have a working Template Driven Form:

// app.module.ts

...
import { IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule } from "igniteui-angular";
import { FormsModule } from "@angular/forms";

@NgModule({
    ...
    imports: [..., IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule, 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.

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

If you want to have an input prefix or suffix, you can use Ignite UI for Angular Prefix or Suffix. Both directives can contain html elements, strings, icons or even other components. Let's add a new input field with string prefix (+359) and igx-icon suffix (<igx-icon>phone</igx-icon>):

<igx-input-group>
    <igx-prefix>+359</igx-prefix>
    <label igxLabel for="phone">Phone</label>
    <input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
    <igx-suffix>
        <igx-icon>phone</igx-icon>
    </igx-suffix>
</igx-input-group>

Here is how the sample looks:

Hints

Ignite UI for Angular Hint provides a helper text placed below the input. The hint can be placed at the start or at the end of the input. The position of the igx-hint can be set using 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="text" [(ngModel)]="user.phone" />
    <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:

Styling

Our inputs could be styled differently by using the type property of the igxInputGroup component. Currently we support four different ways of styling: line (the default one), box, border and search. This is how they look:

view on stackblitz

Styling

The Input Group component makes use of the Ignite UI Theming Library and has a large array of properties that are exposes by its igx-input-theme. In the steps below, we'll take a look at styling the input's label, borders, text and background.

Include styles

The first thing we need to do is include the index file in our style file:

@import '~igniteui-angular/lib/core/styles/themes/index';

We can now begin constructing our custom palette and use it to generate a theme for our input.

Defining a color palette

Instead of hardcoded colors, we'll create an igx-palette and then use the color ranges it provides to generate our custom igx-color

$purple: #9E379F;
$blue: #61AEDB;

$custom-palette: igx-palette($primary: $blue, $secondary: $purple);

$text-color: igx-color($custom-palette, "secondary", 400);
$border-color:  igx-color($custom-palette, "secondary", 900);
$background-color: #91CEFB27;

Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Defining a theme

Now that we've chosen the appropriate colors, we need to generate a theme for our input. We do this by calling igx-input-group-theme and passing the parameters which we'd like to change:

$input-group-theme: igx-input-group-theme(
  $palette: $custom-palette,
  $filled-text-color: $text-color,
  $focused-text-color: $text-color,
  $idle-text-color: $text-color,
  $idle-bottom-line-color: $border-color,
  $focused-bottom-line-color: $border-color,
  $interim-bottom-line-color: $border-color,
  $hover-bottom-line-color: $border-color,
  $box-background: $background-color
);

We've specified that we'd like the text color of our Input Group to change, as well as the bottom border that's displayed. All we have to do now is include the theme.

Including the theme

The easiest way to include our theme is to just use the igx-input-group mixin with the SASS @include statement in our global styles file:

@include igx-input-group($input-group-theme);

Scoping styles

If we include the igx-input-group mixin in our global styles files (styles.scss by default), the custom theme will affect all Input Groups in our application. In case we want to apply our custom styling only to a specific subset of Input Group elements, we have to scope our theme accordingly.

Continuing in the context of the example, we can scope our theme to only apply on the igx-input-group elements under our example component. We can do this by moving our custom styles to our component's style file (input-group-style.component.scss). However, if we just leave the include statement, as shown in the include 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 of Angular's View Encapsulation. Since our component is using Emulated view encapsulation (the default one), our styles from the @include statement are scoped only for our component's template. The input and label elements are part of that view, so their styles are applied correctly. However, the bottom border of the input 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 need to penetrate Angular's Emulated view encapsulation, using ::ng-deep selector in our component's scss file. When using ::ng-deep, we need to make sure that we scope the styles with a :host selector to make sure that these styles will apply only to elements under our component:

// input-group-style.component.scss
:host {
    ::ng-deep {
 @include igx-input-group($input-group-theme);
    }
}

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To make sure the theme does not affect Input Groups in other components in our app, we scope the ::ng-deep statement under :host

Demo

The result of the applied styles can be seen in the below demo:

view on stackblitz

API References

• IgxHintDirective
• IgxInputDirective
• IgxInputGroupComponent
• IgxInputGroupComponent Styles

Additional Resources

Related topics:

• Reactive Forms Integration
• Label & Input
• Combo
• Select
• Display Density

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub