Textarea
A multi-line text input for longer-form content such as comments, descriptions, and messages, with automatic content sizing and character limit support.
Default
The default
Textarea style with a Placeholder hint displayed when the field is empty. The textarea uses field-sizing-content to automatically grow with its content.With Label
Pair a
Textarea with a Label component for accessibility. Set the Id parameter on the textarea and match it with the For attribute on the label so clicking the label focuses the textarea.With Helper Text
Add descriptive helper text below the
Textarea to provide additional context about what the user should enter. Use the text-muted-foreground class to visually distinguish helper text from primary content.With Character Limit
Set
MaxLength to enforce a character limit at the browser level. Combine with @bind-Value to display a live character count below the textarea, giving users real-time feedback on remaining characters.Update Timing
Control when
ValueChanged fires using UpdateTiming. The default is Immediate (fires on every keystroke, as shown in all examples above). OnChange fires only on blur or Enter — useful for fields where intermediate values shouldn't trigger side effects. Debounced fires after the user stops typing for DebounceInterval milliseconds (default 500ms) — ideal for search inputs.Disabled
Set
Disabled to true to make the textarea non-interactive. Disabled textareas have reduced opacity and a not-allowed cursor, clearly indicating they cannot be edited.With Error
Set
AriaInvalid to true to display the textarea in an error state with destructive border and ring colors. Pair with an error message styled using text-destructive and linked via AriaDescribedBy for screen reader support.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styles. You can customize border colors, focus rings, border radius, and more without creating a new component.With Button
Compose a
Textarea with a Button to create a simple message input form. This pattern is common for comment sections, chat inputs, and feedback forms where users submit longer-form text.Feedback Form
A real-world feedback form composition using a
Textarea with Label, helper text, character count, and a submit button inside a Card. This demonstrates how textareas integrate into complete form layouts.Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying textarea element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying textarea element, for advanced JS interop scenarios.