;
};
Textareas provide multi-line text input for comments, descriptions, and other longer content.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Textarea
Textarea(placeholder="Enter your message...")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "textarea_1",
"type": "Textarea",
"placeholder": "Enter your message...",
"disabled": false,
"required": false
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Column,
Label,
Textarea,
)
with Column(gap=2):
Label("Feedback")
Textarea(
placeholder="Tell us what you think...",
rows=5,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-2",
"type": "Column",
"children": [
{"type": "Label", "text": "Feedback", "optional": false},
{
"name": "textarea_2",
"type": "Textarea",
"placeholder": "Tell us what you think...",
"rows": 5,
"disabled": false,
"required": false
}
]
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Textarea
Textarea(
value="This is some initial content that can be edited.",
rows=4,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "textarea_3",
"value": "This is some initial content that can be edited.",
"type": "Textarea",
"rows": 4,
"disabled": false,
"required": false
},
"state": {"textarea_3": "This is some initial content that can be edited."}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Textarea
Textarea(placeholder="This textarea is disabled", disabled=True)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "textarea_4",
"type": "Textarea",
"placeholder": "This textarea is disabled",
"disabled": true,
"required": false
}
}
```
## 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:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Column, Text, Textarea
with Column(gap=4):
ta = Textarea(placeholder="Describe your journey through the galaxy...", rows=4)
Text(f"Character count: {ta.rx.length()}")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"name": "textarea_5",
"type": "Textarea",
"placeholder": "Describe your journey through the galaxy...",
"rows": 4,
"disabled": false,
"required": false
},
{"content": "Character count: {{ textarea_5 | length }}", "type": "Text"}
]
}
}
```
Type into the textarea and the character count updates with each keystroke.
## API Reference
Placeholder text shown when the textarea is empty.
Initial value.
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.
Number of visible text rows.
Whether the textarea is non-interactive.
Whether the textarea is required for form submission.
Additional Tailwind CSS classes appended to the component's built-in styles.
## Protocol Reference
```json Textarea theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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](/protocol/textarea).