Web Components Text Area Overview

    The Ignite UI for Web Components Text Area represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

    Web Components Text Area Example

    Dependencies

    To get started with the Text Area component, you first need to register its module.

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

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

defineComponents(IgcTextareaComponent);

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

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

    <igc-textarea rows="5" label="Tell us your story:">It was a dark and stormy night...</igc-textarea>

    Prefix, Suffix & Helper Text

    With prefix and suffix slots we can add different content before and after the main content of the Text Area. The helper-text slot provides a hint placed below the Text Area. In the following sample we will create a new Text Area field with a text prefix, an icon suffix and a helper text as a hint:

    Text Area Resizing

    There are three different resize options of the IgcTextareaComponent. When set to none, the text area does not resize and uses a scroll bar to show overflow text. When set to vertical (the default option), the text area lets the user resize it vertically. When set to auto, the textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically.

    The full list of attributes of the text area can be found in IgcTextareaComponent API.

    Form Integration

    The sample below shows how a IgcTextareaComponent could be integrated into a form.

    Styling

    The Text Area 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-textarea::part(input) {
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

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

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

    API References

    Additional Resources