Binary selection control for boolean values.

Preview

code

1☐ Subscribe to updates

Usage

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`
`onCheckedChangeAction`	`WidgetAction`	Action triggered when checkbox is toggled	-

Examples

Basic Checkbox

1{2    Type:  models.WidgetNodeTypeCheckbox,3    Name:  "newsletter",4    Label: "Subscribe to newsletter",5}

Pre-checked

1{2    Type:           models.WidgetNodeTypeCheckbox,3    Name:           "notifications",4    Label:          "Enable notifications",5    DefaultChecked: true,6}

Checkbox with Action

Trigger an action immediately when the checkbox is toggled:

1{2    Type:           models.WidgetNodeTypeCheckbox,3    Name:           "task_completed",4    Label:          "Mark task as complete",5    DefaultChecked: false,6    OnCheckedChangeAction: &models.WidgetAction{7        Type:    "toggle_task",8        Payload: map[string]interface{}{"task_id": "123"},9    },10}

Task List Example

1{2    Type: models.WidgetNodeTypeCol,3    Gap:  2,4    Children: []models.WidgetNode{5        {Type: models.WidgetNodeTypeTitle, Value: "Today's Tasks", Size: "lg"},6        {7            Type:           models.WidgetNodeTypeCheckbox,8            Name:           "task1",9            Label:          "Review pull requests",10            DefaultChecked: true,11            OnCheckedChangeAction: &models.WidgetAction{12                Type:    "toggle_task",13                Payload: map[string]interface{}{"task_id": 1},14            },15        },16        {17            Type:           models.WidgetNodeTypeCheckbox,18            Name:           "task2",19            Label:          "Deploy to staging",20            OnCheckedChangeAction: &models.WidgetAction{21                Type:    "toggle_task",22                Payload: map[string]interface{}{"task_id": 2},23            },24        },25        {26            Type:           models.WidgetNodeTypeCheckbox,27            Name:           "task3",28            Label:          "Write documentation",29            OnCheckedChangeAction: &models.WidgetAction{30                Type:    "toggle_task",31                Payload: map[string]interface{}{"task_id": 3},32            },33        },34    },35}

Terms Acceptance (with Form Submit)

1widget := &models.Widget{2    Type:  models.WidgetTypeUI,3    Title: "Complete Registration",4    Children: []models.WidgetNode{5        {6            Type: models.WidgetNodeTypeCol,7            Gap:  3,8            Children: []models.WidgetNode{9                {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email"},10                {Type: models.WidgetNodeTypeCheckbox, Name: "accept_terms", Label: "I accept the terms of service"},11                {Type: models.WidgetNodeTypeCheckbox, Name: "accept_privacy", Label: "I accept the privacy policy"},12                {13                    Type:    models.WidgetNodeTypeRow,14                    Gap:     2,15                    Justify: "end",16                    Children: []models.WidgetNode{17                        {18                            Type:    models.WidgetNodeTypeButton,19                            Label:   "Register",20                            Variant: "default",21                            OnClickAction: &models.WidgetAction{22                                Type:            "register",23                                LoadingBehavior: "self",24                            },25                        },26                    },27                },28            },29        },30    },31}

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  onCheckedChangeAction: {7    type: "terms_changed",8    payload: { field: "terms" },9  },10}

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
Use onCheckedChangeAction for immediate feedback - Useful for task lists or toggles