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 | "" |
required | boolean | Whether the field is required | false |
disabled | boolean | Disable the input | false |
onChangeAction | WidgetAction | Action triggered when value changes | - |
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}Input with Change Action
Trigger an action when the input value changes (useful for live validation or search):
go
1{2 Type: models.WidgetNodeTypeInput,3 Name: "search",4 Placeholder: "Search...",5 OnChangeAction: &models.WidgetAction{6 Type: "search_changed",7 Handler: "client",8 },9}Form with Multiple Inputs
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "User Profile",4 Children: []models.WidgetNode{5 {6 Type: models.WidgetNodeTypeCol,7 Gap: 3,8 Children: []models.WidgetNode{9 {Type: models.WidgetNodeTypeLabel, Value: "First Name", FieldName: "first_name"},10 {Type: models.WidgetNodeTypeInput, Name: "first_name", Placeholder: "First name"},11 {Type: models.WidgetNodeTypeLabel, Value: "Last Name", FieldName: "last_name"},12 {Type: models.WidgetNodeTypeInput, Name: "last_name", Placeholder: "Last name"},13 {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},14 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email address"},15 {16 Type: models.WidgetNodeTypeRow,17 Gap: 2,18 Justify: "end",19 Children: []models.WidgetNode{20 {21 Type: models.WidgetNodeTypeButton,22 Label: "Save",23 Variant: "default",24 OnClickAction: &models.WidgetAction{25 Type: "save_profile",26 LoadingBehavior: "self",27 },28 },29 },30 },31 },32 },33 },34}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 onChangeAction: {7 type: "email_changed",8 handler: "client",9 },10}Best Practices
- Always set
name- Required for form data collection - Use descriptive placeholders - Guide users on expected input
- Use labels - Add Label nodes before inputs for accessibility
- Wrap in Col - Stack multiple inputs vertically with gap
- Use onChangeAction sparingly - For live validation or search, not every input