Basic Usage
With Labels
A textarea has no built-in caption, so pair it with aLabel 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
Passvalue= 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
Setdisabled=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
str | None
default:"None"
Placeholder text shown when the textarea is empty.
str | None
default:"None"
Initial value.
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.int | None
default:"None"
Number of visible text rows.
bool
default:"False"
Whether the textarea is non-interactive.
bool
default:"False"
Whether the textarea is required for form submission.
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.
Protocol Reference
Textarea