Open Source

React Text Area Overview

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

React Text Area Example

Dependencies

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 IgrTextarea and its necessary CSS like so:

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

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

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

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. When slotting content, we recommend using a <span> element for simple text, symbols, or emojis, and an <igc-icon> component for icons. In the following sample, we will create a new Text Area field with an icon prefix and helper text as a hint:

<IgrTextarea label="Your feedback">
    <IgrIcon name="feedback" slot="prefix"></IgrIcon>
    <span slot="helper-text">Give us a short description of what you liked/disliked</span>
</IgrTextarea>

Text Area Resizing

There are three different resize options of the IgrTextarea. 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 text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically.

Form Integration

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

Styling

The IgrTextarea 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-textarea::part(input) {
  background-color: var(--ig-info-100);
  border-color: var(--ig-primary-400);
}

igc-textarea::part(label) {
  color: var(--ig-gray-800);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
  color: var(--ig-primary-500-contrast);
  border-color: var(--ig-primary-500);
  background-color: var(--ig-primary-500);
}