Binary selection control for boolean values.
Preview
code
1☐ Subscribe to updatesUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeCheckbox,3 Name: "accept_terms",4 Label: "I accept the terms and conditions",5}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "checkbox" | Node type | required |
name | string | Form field name (key in form data) | required |
label | string | Label text displayed next to checkbox | - |
defaultChecked | boolean | Initial checked state | false |
Examples
Basic Checkbox
go
1{2 Type: models.WidgetNodeTypeCheckbox,3 Name: "newsletter",4 Label: "Subscribe to newsletter",5}Pre-checked
go
1{2 Type: models.WidgetNodeTypeCheckbox,3 Name: "notifications",4 Label: "Enable notifications",5 DefaultChecked: true,6}Multiple Checkboxes
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeText, Value: "Preferences", Variant: "title"},6 {Type: models.WidgetNodeTypeCheckbox, Name: "email_updates", Label: "Email updates"},7 {Type: models.WidgetNodeTypeCheckbox, Name: "sms_alerts", Label: "SMS alerts"},8 {Type: models.WidgetNodeTypeCheckbox, Name: "push_notifications", Label: "Push notifications", DefaultChecked: true},9 },10}Terms Acceptance
go
1widget := &models.Widget{2 Type: models.WidgetTypeUI,3 Title: "Complete Registration",4 Interactive: true,5 Children: []models.WidgetNode{6 {7 Type: models.WidgetNodeTypeCol,8 Gap: 3,9 Children: []models.WidgetNode{10 {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email"},11 {Type: models.WidgetNodeTypeCheckbox, Name: "accept_terms", Label: "I accept the terms of service"},12 {Type: models.WidgetNodeTypeCheckbox, Name: "accept_privacy", Label: "I accept the privacy policy"},13 },14 },15 },16 Actions: []models.WidgetActionButton{17 {Label: "Register", Action: models.WidgetAction{Type: "register"}},18 },19}Form Data
When the widget is submitted, checkbox values are included as booleans:
json
1{2 "email": "[email protected]",3 "accept_terms": true,4 "accept_privacy": false5}TypeScript
typescript
1const node: WidgetNode = {2 type: "checkbox",3 name: "accept_terms",4 label: "I accept the terms",5 defaultChecked: false,6}Best Practices
- Use clear labels - Describe what checking the box means
- Positive phrasing - "Enable X" instead of "Disable X"
- Group related checkboxes - Use Col with gap for visual grouping
- Set reasonable defaults - Pre-check common preferences