React Input Overview

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

    React Input Example

    EXAMPLE

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

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

    npm install igniteui-react
    cmd

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

    import { IgrInputModule, IgrInput } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrInputModule.register();
    tsx
    <IgrInput type="email" label="Subscribe"></IgrInput>
    tsx

    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:

    EXAMPLE

    Ignite UI for React | CTA Banner

    Helper Text

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

    EXAMPLE

    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:

    EXAMPLE

    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 Input component exposes CSS parts for almost all of its inner elements. The following table lists all CSS parts exposed by the Input:

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

    EXAMPLE

    API References

    Additional Resources