Layout container optimized for form controls and submission.
Preview
code
1┌────────────────────────┐2│ Email │3│ [________________] │4│ │5│ Message │6│ [________________] │7│ [________________] │8│ │9│ [Submit] │10└────────────────────────┘Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeForm,3 Direction: "col",4 Gap: 3,5 OnSubmitAction: &models.WidgetAction{6 Type: "submit_form",7 },8 Children: []models.WidgetNode{9 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email"},10 {Type: models.WidgetNodeTypeButton, Label: "Submit", Submit: true},11 },12}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "form" | Node type | required |
children | WidgetNode[] | Form content | - |
onSubmitAction | ActionConfig | Action dispatched on form submission | - |
direction | "row" | "col" | Flex direction for children | "col" |
gap | number | string | Gap between children | - |
align | string | Cross-axis alignment | - |
justify | string | Main-axis distribution | - |
padding | number | string | object | Inner padding | - |
background | string | ThemeColor | Background color | - |
border | number | object | Border styling | - |
radius | string | Border radius token | - |
Examples
Basic Form
go
1{2 Type: models.WidgetNodeTypeForm,3 Direction: "col",4 Gap: 3,5 OnSubmitAction: &models.WidgetAction{Type: "submit"},6 Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email"},8 {Type: models.WidgetNodeTypeInput, Name: "password", Placeholder: "Password"},9 {Type: models.WidgetNodeTypeButton, Label: "Sign In", Submit: true},10 },11}Form with Labels
go
1{2 Type: models.WidgetNodeTypeForm,3 Direction: "col",4 Gap: 4,5 OnSubmitAction: &models.WidgetAction{Type: "create_account"},6 Children: []models.WidgetNode{7 // Name field8 {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{9 {Type: models.WidgetNodeTypeLabel, Value: "Full Name", FieldName: "name"},10 {Type: models.WidgetNodeTypeInput, Name: "name", Required: true},11 }},12 // Email field13 {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{14 {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},15 {Type: models.WidgetNodeTypeInput, Name: "email", Required: true},16 }},17 // Submit18 {Type: models.WidgetNodeTypeButton, Label: "Create Account", Submit: true, Block: true},19 },20}Form with Validation
go
1{2 Type: models.WidgetNodeTypeForm,3 Direction: "col",4 Gap: 3,5 OnSubmitAction: &models.WidgetAction{Type: "submit"},6 Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeInput, Name: "email", Required: true, Pattern: "[^@]+@[^@]+"},8 {Type: models.WidgetNodeTypeCheckbox, Name: "terms", Label: "I accept the terms", Required: true},9 {Type: models.WidgetNodeTypeButton, Label: "Continue", Submit: true},10 },11}Form Submission
When a form is submitted:
- All
requiredfields are validated patternregex validation runs on relevant inputs- If valid,
onSubmitActionis dispatched with form data - Form data includes all named fields
json
1{2 "email": "[email protected]",3 "name": "John Doe",4 "terms": true5}TypeScript
typescript
1const node: WidgetNode = {2 type: "form",3 direction: "col",4 gap: 3,5 onSubmitAction: { type: "submit" },6 children: [7 { type: "input", name: "email" },8 { type: "button", label: "Submit", submit: true },9 ],10}Best Practices
- Use submit button - Set
Submit: trueon the submit button - Add validation - Use
requiredandpatternfor client-side validation - Group with labels - Wrap label + input in Col for proper layout
- Provide feedback - Show success/error after submission