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 100 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
Valueparameter to astringobject. It supports one-way and two-way binding. - (optional) Set the
AutoSizeproperty to adjust the TextArea height based on the user input.
Basic TextArea with two-way value binding
<TelerikTextArea @bind-Value="@TextAreaValue"
AutoSize="true" />
<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.
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 |
|---|---|---|
Value |
string |
Get/set the value of the input, can be used for binding. |
AutoComplete |
bool |
Maps to the autocomplete attribute of the HTML <textarea>. |
Class |
string |
The custom CSS class to be rendered on the <span class="k-textarea"> element. |
AutoSize |
bool |
Specifies if the TextArea will adjust its height based on the user input. |
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. |
Id |
string |
Renders as the id attribute on the <textarea> element, so you can attach a <label for="">. |
Label |
string |
The label element rendered next to the <textarea> to provide the user with information on its purpose. It covers the input in a fashion similar to a placeholder, and floating animation upwards on focus. If you don't want this effect or the height increase it causes, use the Id parameter to attach your own <label> tag. |
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. |
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 tooltip. |
ValidateOn |
ValidationEvent enum ( Input) |
Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs. |
Width |
string |
The component width. See Dimensions. The Width parameter has no default value, but the theme applies a width: 100% style. |
See the Input Validation article.