# Blazor TextArea Overview

The Telerik <a href ="https://www.telerik.com/blazor-ui/textarea" target="_blank">Blazor TextArea component</a> is a highly customizable multi-line text input area. It provides features like auto resizing based on the user input and [events](https://www.telerik.com/blazor-ui/documentation/components/textarea/events) to respond to user actions.

## Creating Blazor TextArea

1. Add the `<TelerikTextArea>` tag to a Razor file.
2. Set the `Value` parameter to a `string` object. It supports one-way and two-way binding.
3. (optional) Set the `MaxLength ` property to control the maximum amount of characters that the user can type in the component.
4. (optional) Set the `Rows` property to adjust the TextArea height.

> caption Basic TextArea with two-way value binding

<demo metaUrl="client/textarea/overview/" height="300"></demo>

## Appearance

The TextArea component provides settings to control its appearance. [Read more about the Blazor TextArea appearance settings](https://www.telerik.com/blazor-ui/documentation/components/textarea/appearance).

> tip To learn more about the appearance, anatomy, and accessibility of the TextArea, visit the [Progress Design System Kit documentation](https://www.telerik.com/design-system/docs/components/textarea/)—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...](https://www.telerik.com/blazor-ui/documentation/common-features/input-adornments)

## Events

The Blazor TextArea fires **blur** and value **change** events to respond to user actions. [Read more about the Blazor TextArea events](https://www.telerik.com/blazor-ui/documentation/components/textarea/events).

## TextArea Parameters

The Blazor TextArea provides various parameters to configure the component:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter        | Type and Default Value                  | Description                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AutoCapitalize` | `string`                                | A `string` that maps to the [`autocapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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>`.                                                                                                                                                                                                                                                                                                                             |
| `ResizeMode`     | `TextAreaResizeMode?`                   | Specifies the TextArea's resize behavior. The default behavior is the one set by the browser. You can also [use CSS to limit the resizing up to a max height](https://www.telerik.com/blazor-ui/documentation/knowledge-base/textarea-autosize-max-height).                                                                                                                              |
| `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` <br /> `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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_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](https://www.telerik.com/blazor-ui/documentation/components/tooltip/overview).                                                                                                                                                                                                                |
| `ValidateOn`     | `ValidationEvent` enum <br /> (`Input`) | Configures the event that will trigger validation (if validation is enabled). Read more at [Validation Modes for Simple Inputs](https://www.telerik.com/blazor-ui/documentation/common-features/input-validation#validation-modes-for-simple-inputs).                                                                                                                                    |
| `Value`          | `string`                                | The value of the component. Supports two-way binding.                                                                                                                                                                                                                                                                                                                                    |
| `Width`          | `string`                                | The component width. See [Dimensions](https://www.telerik.com/blazor-ui/documentation/common-features/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](https://www.telerik.com/blazor-ui/documentation/common-features/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](https://www.telerik.com/blazor-ui/documentation/knowledge-base/inputs-set-focus), which provides more examples and tips.

> caption Use TextArea methods

```RAZOR.skip-repl
<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();
    }
}
```

## Next Steps

* [Handle the TextArea Events](https://www.telerik.com/blazor-ui/documentation/components/textarea/events)
* [Explore the TextArea Appearance Settings](https://www.telerik.com/blazor-ui/documentation/components/textarea/appearance)

## See Also

* [Live TextArea Demos](https://demos.telerik.com/blazor-ui/textarea/overview)
* [TextArea API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.teleriktextarea)