# Textarea

> Multi-line text input control for longer form content.

**URL:** https://inference.sh/docs/agents/widgets/textarea
**Last updated:** 2026-09-18

---

Multi-line text input control for longer form content.

## Preview

```
┌────────────────────────┐
│ Enter your message...  │
│                        │
│                        │
└────────────────────────┘
```

## Usage

```go
node := models.WidgetNode{
    Type:        models.WidgetNodeTypeTextarea,
    Name:        "message",
    Placeholder: "Enter your message",
    Rows:        4,
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"textarea"` | Node type | required |
| `name` | `string` | Form field name (key in form data) | required |
| `placeholder` | `string` | Placeholder text shown when empty | - |
| `defaultValue` | `string` | Initial value | `""` |
| `rows` | `number` | Initial number of visible rows | `3` |
| `disabled` | `boolean` | Disable interactions | `false` |
| `required` | `boolean` | Mark as required for form submission | `false` |
| `autoResize` | `boolean` | Automatically grow/shrink to fit content | `false` |
| `maxRows` | `number` | Maximum rows when auto-resizing | `10` |
| `variant` | `"soft" \| "outline"` | Visual style | `"outline"` |
| `size` | `SizeToken` | Control size | `"md"` |

## Examples

### Basic Textarea

```go
{
    Type:        models.WidgetNodeTypeTextarea,
    Name:        "description",
    Placeholder: "Describe your issue",
    Rows:        4,
}
```

### Auto-resizing

```go
{
    Type:       models.WidgetNodeTypeTextarea,
    Name:       "notes",
    AutoResize: true,
    MaxRows:    10,
}
```

### In a Form

```go
widget := &models.Widget{
    Type:        models.WidgetTypeUI,
    Title:       "Feedback",
    Interactive: true,
    Children: []models.WidgetNode{
        {
            Type: models.WidgetNodeTypeCol,
            Gap:  3,
            Children: []models.WidgetNode{
                {Type: models.WidgetNodeTypeInput, Name: "subject", Placeholder: "Subject"},
                {Type: models.WidgetNodeTypeTextarea, Name: "message", Placeholder: "Your message", Rows: 5},
            },
        },
    },
    Actions: []models.WidgetActionButton{
        {Label: "Send", Action: models.WidgetAction{Type: "send_feedback"}},
    },
}
```

## Form Data

When submitted, textarea value is included:

```json
{
  "subject": "Bug report",
  "message": "I found an issue with..."
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "textarea",
  name: "message",
  placeholder: "Enter message",
  rows: 4,
}
```

## Best Practices

1. **Set appropriate rows** - Match expected content length
2. **Use autoResize for variable content** - Better UX for unknown lengths
3. **Provide clear placeholder** - Guide users on expected input