selector#

The selector property creates an interface in Page Builder that displays all options in a selectable display. It is commonly used to target elements within a component for styling, interaction, or alignment logic.

`selector` Definition#

{
  "code": "alignment",
  "prompt": "Vertical Alignment",
  "type": "selector",
  "options": [
    {
      "text": "Top",
      "value": "top"
    },
    {
      "text": "Center",
      "value": "center"
    },
    {
      "text": "Bottom",
      "value": "bottom"
    }
  ]
}

Supported Fields#

Field	Type	Required	Description
`type`	string	Yes	Must be `"selector"`
`code`	string	Yes	Unique identifier used in `l.settings:instance`
`prompt`	string	Yes	Label shown in the Page Builder admin UI
`required`	boolean	No	If `true`, user must select a value before saving. Defaults to `false`
`options`	array	Yes	Array of values for the dropdown selector
`visibility_conditions`	object	No	Used for conditional UI logic

Field Behavior: `options`#

The options field defines the available values the user can select. Each item must include:

text: The label shown in the dropdown
value: The stored string used for logic or styling
type: Optional value containing icon to display a Miva icon
If using the MMX framework a list can be found within the LSK under the ui.js file.

Example:

"options": [
  { "text": "Top", "value": "top" },
  { "text": "Center", "value": "center" },
  { "text": "Bottom", "value": "bottom" }
]

The Selected value is stored exactly as-is in l.settings:instance. The value field can represent CSS classes, logical keywords, or selector strings depending on the use case.

`l.settings:instance` Structure#

The selected value is stored under the property code as a simple key-value pair:

:alignment:value=center

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

Template Usage#

Use the selected value directly in template logic or to apply conditional output:

<div class="component alignment--&mvte:instance:alignment:value;">
  <!-- Renders as alignment--top, alignment--center, or alignment--bottom -->
</div>

JavaScript Access#

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

  if (alignment === "top") {
    document.body.classList.add("align-top");
  }
</script>

`defaults` Definition#

You can define a pre-selected value in the defaults block:

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

Best Practices#

Use for styling or positioning configuration where dropdowns are more user-friendly than free text.
Combine with preview_property_selector to reflect visual alignment in the Page Builder preview pane.
Use semantic value strings that can map directly to class names or JS logic.

selector#

selector Definition#