Skip to main content
Textareas provide multi-line text input for comments, descriptions, and other longer content.

​
Basic Usage

​
With Labels

A textarea has no built-in caption, so pair it with a Label to tell the user what the field is for. Stacking the two in a Column keeps the label directly above its input, the layout people expect when scanning a form.

​
With Initial Value

Pass value= to seed the field’s state with starting text. Use this when you’re editing existing content — a saved draft or a record loaded from a database — so the user opens the field already populated with what they’re changing.

​
Disabled State

Set disabled=True to make a textarea read-only and visually muted, blocking edits and keeping it out of the tab order. This fits a field that can’t be changed in the current context, such as a comment box that unlocks only after another action completes.

​
Reading the Value

Use .rx to get a reactive reference to the textarea’s current text. The .length() pipe returns the character count, which is useful for showing a live counter: Type into the textarea and the character count updates with each keystroke.

​
API Reference

Textarea Parameters

​
placeholder
str | None
default:"None"
Placeholder text shown when the textarea is empty.
​
value
str | None
default:"None"
Initial value.
​
name
str | None
default:"None"
State key for the textarea’s current value. Auto-generated if not provided. Use .rx to reference the textarea’s content in other components without specifying the key explicitly.
​
rows
int | None
default:"None"
Number of visible text rows.
​
disabled
bool
default:"False"
Whether the textarea is non-interactive.
​
required
bool
default:"False"
Whether the textarea is required for form submission.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Textarea
{
  "type": "Textarea",
  "id?": "string",
  "onMount?": "any",
  "name?": "string",
  "value?": "string",
  "placeholder?": "string",
  "rows?": "number",
  "disabled?": false,
  "required?": false,
  "minLength?": "number",
  "maxLength?": "number",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Textarea.