React Input Overview

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

React Input Example

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrInput, its necessary CSS, and register its module, like so:

import { IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

<IgrInput type="email" label="Subscribe"></IgrInput>

Prefix & Suffix

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

Helper Text

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

Input Sizing

We can allow the user to change the size of the IgrInput 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:

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

Styling

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

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);
}

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub