checkbox

---

The checkbox property provides a true/false toggle in Page Builder. It maps to an HTML <input type="checkbox"> and outputs a 1 (checked) or 0 (unchecked) value in l.settings:instance.

It is used for binary options like enabling features, toggling visibility, or activating conditional logic in templates.

checkbox Definition

{
  "code": "enable_discount",
  "prompt": "Enable Discount?",
  "type": "checkbox",
  "required": true
}

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "checkbox".
required	boolean	No	If true, user must check before saving.
preview_property_selector	string	No	Target element for PageBuilder Inspector.
visibility_conditions	object	No	Shows/hides field based on logic.

l.settings:instance Structure

Checkbox values are numeric strings:

:enable_discount:value=1

Unselected

:enable_discount:value=0

Template Usage

Use the value to conditionally render content:

<mvt:if expr="l.settings:instance:enable_discount:value EQ 1">
  <div class="discount-banner">Limited Time Offer!</div>
</mvt:if>

Or direct output:

&mvte:instance:enable_discount:value;

JavaScript Access

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var isDiscountEnabled = instance.enable_discount.value == 1;
</script>

defaults Definition

Use a defaults block in flex.json to pre-check the checkbox:

"defaults": {
  "enable_discount": {
    "value": 1
  }
}

Best Practices

• Always treat unchecked state as "0" (not null or false).
• Don’t use checkboxes for multiple options — use radio or select instead.
• Use defaults to establish a known initial state.

Complete Example

{
  "code": "enable_discount",
  "prompt": "Enable Discount?",
  "type": "checkbox",
  "required": true
}