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