Web Components Input Overview

The Ignite UI for Web Components Input is a component where the user can enter data.

Web Components Input Example

import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);
export class InputOverview {
    constructor() {
    }
}

new InputOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com">
          <span slot="prefix">Email</span>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

To get started we need to import the IgcInputComponent in our typescript file and register the component by calling the defineComponents() function as follows:

import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

After we import the IgcInputComponent component we are ready to start using it, so let's add our first Input.

<igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>
html

Prefix & Suffix

With prefix and suffix slots we can add different content before and after the main content of the Input. In the following sample we will create a new Input field with a text prefix and an icon suffix:

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputPrefixSuffix {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputPrefixSuffix();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Prefix & Suffix</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Helper Text

The helper-text slot provides a hint placed below the Input. Let's add some helper text to our phone Input:

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputHelperText {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputHelperText();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Helper Text</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
          <span slot="helper-text">Ex.: +359 888 123 456</span>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Input Sizing

We can allow the user to change the size of the IgcInputComponent using the --ig-size CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input:

import { defineComponents, IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputSizingStyle.css';

defineComponents(IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent);
const phoneIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputSize {
    radioGroup: IgcRadioGroupComponent;
    inputRequired: IgcInputComponent;
    inputDisabled: IgcInputComponent;
    inputReadonly: IgcInputComponent;

    constructor() {
        this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
        this.inputRequired = document.getElementById('input-required') as IgcInputComponent;
        this.inputDisabled = document.getElementById('input-disabled') as IgcInputComponent;
        this.inputReadonly = document.getElementById('input-readonly') as IgcInputComponent;
        registerIconFromText("phone", phoneIcon);

        this.radioGroup.addEventListener('click', (radio: any) => {
            this.inputRequired.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputDisabled.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputReadonly.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        });
    }
}

new InputSize();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Size</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-radio-group id="radio-group" alignment="horizontal">
          <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
          <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
          <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
        </igc-radio-group>

        <igc-input id="input-required" type="text" label="Required" value="This input is required" required></igc-input>
        <igc-input id="input-disabled" type="text" label="Disabled" value="This input is disabled" disabled></igc-input>
        <igc-input id="input-readonly" type="text" label="Readonly" value="This input is readonly" readonly></igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

#radio-group {
    display: flex;
    margin: 0 auto;
    width: 15%;
}css

In the sample above we have demonstrated the use of the following attributes:

required - Used to mark the input as required
disabled - Used to disable the input
readonly - Used to mark the input as readonly

The full list of attributes can be found in IgcInputComponent API.

Styling

The IgcInputComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

Name	Description
`container`	The main wrapper that holds all main input elements.
`input`	The native input element.
`label`	The native label element.
`prefix`	The prefix wrapper.
`suffix`	The suffix wrapper.
`helper-text`	The helper text wrapper.

igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}
scss

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputStyling.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputStyling {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-input::part(input){
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

igc-input::part(label){
    color: rgb(1, 42, 74);
}

igc-input::part(prefix),
igc-input::part(suffix){
    color: white;
    border-color: rgb(42, 111, 151);
    background-color: rgb(70, 143, 175);
}
css