select

---

The select property provides a dropdown menu in the Page Builder admin interface. It allows users to choose a single value from a predefined list of options, just like an HTML <select> element.

Select Definition

{
  "code": "alignment",
  "prompt": "Text Alignment",
  "type": "select",
  "options": [
    { "text": "Left", "value": "left" },
    { "text": "Center", "value": "center" },
    { "text": "Right", "value": "right" }
  ],
  "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 "select".
required	boolean	No	If true, the user must select a value before saving.
options	array	Yes	List of { "text": "", "value": "" } options for the dropdown.
preview_property_selector	string	No	Target element for PageBuilder Inspector.
visibility_conditions	object	No	Shows/hides field based on logic.

l.settings:instance Structure

:alignment:value=center

The stored value corresponds to the selected dropdown option.

Template Usage

<p>Alignment: &mvte:instance:alignment:value;</p>

<mvt:if expr="l.settings:instance:alignment:value EQ 'center'">
  <div class="text-center">Centered Text</div>
</mvt:if>

JavaScript Access

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

defaults Definition

To set an initial selected option, use the defaults block:

"defaults": {
  "alignment": {
    "value": "center"
  }
}

Best Practices

• Always include at least two options for user selection.
• Use semantic value strings for clarity ("left", "right", "primary", etc.).
• Use required: true if the field must have a value selected.
• Keep value strings lowercase with hyphens or underscores for consistency.

Complete Example

{
  "code": "cta_style",
  "prompt": "Button Style",
  "type": "select",
  "required": true,
  "options": [
    { "text": "Primary", "value": "primary" },
    { "text": "Secondary", "value": "secondary" },
    { "text": "Outline", "value": "outline" }
  ]
}

Output

:cta_style:value=primary

Template

<a class="btn &mvte:instance:cta_style:value;">Shop Now</a>