Blazor Text Area Overview
The Ignite UI for Blazor 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.
Blazor Text Area Example
Dependencies
To get started with the Text Area component, you first need to register its module.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
You will also need to link an additional CSS file to apply the styling to the IgbTextarea
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>
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 IgbTextarea
. 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 IgbTextarea
could be integrated into a form.
Styling
The IgbTextarea
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);
}