Blazor TextArea Overview
The Telerik Blazor TextArea component is a highly customizable multi-line text input area. It provides features like auto resizing based on the user input and events to respond to user actions.
The TextArea component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor TextArea
- Add the
<TelerikTextArea>
tag to a Razor file. - Set the
Value
parameter to astring
object. It supports one-way and two-way binding. - (optional) Set the
AutoSize
property to adjust the TextArea height based on the user input. - (optional) Set the
MaxLength
property to control the maximum amount of characters that the user can type in the component.
<TelerikTextArea @bind-Value="@TextAreaValue"
AutoSize="true"
MaxLength="200" />
<p>TextArea value: @TextAreaValue</p>
@code {
public string TextAreaValue { get; set; }
}
Appearance
The TextArea component provides settings to control its appearance. Read more about the Blazor TextArea appearance settings.
To learn more about the appearance, anatomy, and accessibility of the TextArea, visit the Progress Design System Kit documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Adornments
The component allows you to add custom elements as prefixes and suffixes. Read more about how to render custom adornments before and after the input element...
Events
The Blazor TextArea fires blur and value change events to respond to user actions. Read more about the Blazor TextArea events.
TextArea Parameters
The Blazor TextArea provides various parameters to configure the component:
Parameter | Type and Default Value | Description |
---|---|---|
AutoCapitalize |
string |
A string that maps to the autocapitalize attribute of the HTML element. It's applicable only for touch devices and virtual keyboards. |
AutoComplete |
bool |
Maps to the autocomplete attribute of the HTML <textarea> . |
AutoSize (deprecated) |
bool |
Specifies if the TextArea will adjust its height based on the user input. You can use CSS to limit the resizing up to a max height. This parameter is deprecated. Use ResizeMode with Auto value instead. |
ResizeMode |
TextAreaResizeMode? |
Specifies the TextArea's resize behavior. Default behavior is the one set by the browser. |
Class |
string |
The custom CSS class to be rendered on the <span class="k-textarea"> element. |
Cols |
int? |
Maps to the cols attribute of the HTML <textarea> element. Do not use together with Width . |
DebounceDelay |
int |
Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |
Enabled |
bool true
|
Whether the TextArea is enabled. |
ReadOnly |
bool |
If set to true , the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
Id |
string |
Renders as the id attribute on the <textarea> element, so you can attach a <label for=""> . |
MaxLength |
int? |
Maps to the maxlength attribute of the HTML <textarea> element. |
Name |
string |
The name attribute of the HTML element. It is usually required so the AutoComplete will be honored by the browser. |
Placeholder |
string |
A string that maps to the placeholder attribute of the HTML element. If a Label is defined, it will be shown instead of the placeholder when the input is not focused. |
Rows |
int? |
Maps to the rows attribute of the HTML <textarea> element. |
SpellCheck |
string |
A string that maps to the spellcheck attribute of the HTML element. Use it to disable browser spellchecking if it's intrusive to the user or due to privacy and security concerns. |
TabIndex |
Nullable<int> |
Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key. |
Title |
string |
Maps to the title attribute of the HTML element. You can use it to add a Blazor Tooltip. |
ValidateOn |
ValidationEvent enum ( Input ) |
Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs. |
Value |
string |
The value of the component. Supports two-way binding. |
Width |
string |
The component width. See Dimensions. The Width parameter has no default value, but the theme applies a width: 100% style. Do not use together with Cols . |
See the Input Validation article.
TextArea Reference and Methods
The TextArea provides a FocusAsync
method that allows the application to focus the component programmatically. First, obtain reference to the component through its @ref
attribute.
Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips.
<TelerikButton OnClick="@FocusTextArea">Focus TextArea</TelerikButton>
<TelerikTextArea @ref="@TextAreaRef"
@bind-Value="@TextAreaValue"
Width="200px" />
@code {
private TelerikTextArea TextAreaRef { get; set; }
private string TextAreaValue { get; set; }
async Task FocusTextArea()
{
await TextAreaRef.FocusAsync();
}
}