Text input field for collecting user input.
Preview
code
1[Enter your name...]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeInput,3 Name: "email",4 Placeholder: "Enter your email",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "input" | Node type | required |
name | string | Form field name (key in form data) | required |
placeholder | string | Placeholder text | - |
defaultValue | string | Initial value | "" |
Examples
Basic Input
go
1{Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Enter name"}With Default Value
go
1{2 Type: models.WidgetNodeTypeInput,3 Name: "email",4 Placeholder: "Enter email",5 DefaultValue: "[email protected]",6}Form with Multiple Inputs
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "User Profile",4 Interactive: true,5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeCol,8 Gap: 3,9 Children: []models.WidgetNode{10 {Type: models.WidgetNodeTypeInput, Name: "first_name", Placeholder: "First name"},11 {Type: models.WidgetNodeTypeInput, Name: "last_name", Placeholder: "Last name"},12 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email address"},13 },14 },15 },16 Actions: []models.WidgetActionButton{17 {Label: "Save", Action: models.WidgetAction{Type: "save_profile"}},18 },19}Form Data
When the widget is submitted, input values are included in the form data:
json
1{2 "first_name": "John",3 "last_name": "Doe",4 "email": "[email protected]"5}TypeScript
typescript
1const node: WidgetNode = {2 type: "input",3 name: "email",4 placeholder: "Enter email",5 defaultValue: "",6}Best Practices
- Always set
name- Required for form data collection - Use descriptive placeholders - Guide users on expected input
- Set
Interactive: true- On the widget when using inputs - Wrap in Col - Stack multiple inputs vertically with gap