Multi-line text input control for longer form content.
Preview
code
1┌────────────────────────┐2│ Enter your message... │3│ │4│ │5└────────────────────────┘Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeTextarea,3 Name: "message",4 Placeholder: "Enter your message",5 Rows: 4,6}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
1{2 Type: models.WidgetNodeTypeTextarea,3 Name: "description",4 Placeholder: "Describe your issue",5 Rows: 4,6}Auto-resizing
go
1{2 Type: models.WidgetNodeTypeTextarea,3 Name: "notes",4 AutoResize: true,5 MaxRows: 10,6}In a Form
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "Feedback",4 Interactive: true,5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeCol,8 Gap: 3,9 Children: []models.WidgetNode{10 {Type: models.WidgetNodeTypeInput, Name: "subject", Placeholder: "Subject"},11 {Type: models.WidgetNodeTypeTextarea, Name: "message", Placeholder: "Your message", Rows: 5},12 },13 },14 },15 Actions: []models.WidgetActionButton{16 {Label: "Send", Action: models.WidgetAction{Type: "send_feedback"}},17 },18}Form Data
When submitted, textarea value is included:
json
1{2 "subject": "Bug report",3 "message": "I found an issue with..."4}TypeScript
typescript
1const node: WidgetNode = {2 type: "textarea",3 name: "message",4 placeholder: "Enter message",5 rows: 4,6}Best Practices
- Set appropriate rows - Match expected content length
- Use autoResize for variable content - Better UX for unknown lengths
- Provide clear placeholder - Guide users on expected input