Web Components Input Overview

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

    Web Components Input Example

    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);
    
    <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>
    

    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:

    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 choose the size of the IgcInputComponent by using its size property. То 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

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

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

    API References

    For more detailed information regarding the Input's API, refer to the following links:

    Additional components and/or directives that were used:

    Additional Resources

    API Members