Let the visitor select multiple options. Selected values are stored as an array variable — use sum() in formulas to add numeric option values.
In the builder: Elements → Form Widgets → Checkbox
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Variable name (required), e.g. add_ons, extras. |
| Value | Default selection (option values). |
Options
Click Edit Options to define choices. Each option has a value and caption.
Field Option
| UI field | Description |
|---|---|
| Label | Label above the checkbox group. |
| Status | See Status below. |
Status
| Value | Behavior |
|---|---|
| Editable | Visitor can type and change the value (default). |
| Readonly | Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled | Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
On Change
Attach actions when selections change — click Add action.
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Label | Text above the checkbox group. |
| Control Area | Region around all checkboxes. |
| Checkbox Option | Each checkbox and its caption. |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
.cp-inline-block |
Inline checkbox wrapper. |
Using the value in formulas
The variable holds an array of selected values. For numeric option values:
= sum(add_ons)
Checkbox vs Radio
| Checkbox | Radio | |
|---|---|---|
| Selection | Multiple | Single |
| Formula type | Array | Single value |
| Best for | Optional add-ons | Exclusive choices |
Use Checkbox when visitors may pick more than one item.