text

---

The text property provides a single-line input in Page Builder for short strings such as headings, button labels, or links. It supports styling, validation, conditional display, and live preview DOM targeting.

text Definition

{
  "code": "cta_text",
  "prompt": "Call to Action Text",
  "type": "text",
  "text_type": "text",
  "placeholder": "Click Here",
  "required": true,
  "preview_property_selector": "button[data-cta]",
  "visibility_conditions": {
    "depends_on": {
      "show_cta": { "value": 1 }
    }
  },
  "textsettings": {
    "fields": [
      {
        "code": "font_color",
        "type": "color",
        "style": "color",
        "pseudoclasses": ["normal"]
      }
    ]
  }
}

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 "text".
text_type	string	No	Input type: "text", "email", "url", "tel", "number", "password" (Defaults to text).
placeholder	string	No	Input placeholder text.
required	boolean	No	Requires user input if true.
minlength / maxlength	number	No	Minimum and maximum character count.
validation_pattern	string	No	RegEx pattern for custom validation.
validation_message	string	No	Shown when validation fails.
preview_property_selector	string	No	Target element for PageBuilder Inspector.
visibility_conditions	object	No	Shows/hides field based on logic.
textsettings	object	No	Typographic styling configuration.

l.settings:instance Structure

:cta_text:value=Shop Now
:cta_text:textsettings:styles:classname=flex_abc123

Template Usage

<mvt:if expr="l.settings:instance:show_cta:value EQ 1">
  <button data-cta class="&mvte:instance:cta_text:textsettings:styles:classname;">
    &mvte:instance:cta_text;
  </button>
</mvt:if>

JavaScript Access

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

Best Practices

• Use text_type for semantic behavior and accessibility.
• Include maxlength to prevent template overflow.
• Use textsettings for consistent output control.
• Use preview_property_selector when targeting output updates.
• Use visibility_conditions for context-aware UI fields.

Complete Example

{
  "code": "cta_text",
  "prompt": "CTA",
  "type": "text",
  "placeholder": "Click Here",
  "text_type": "text",
  "required": true,
  "preview_property_selector": "button[data-cta]",
  "visibility_conditions": {
    "depends_on": {
      "show_cta": { "value": 1 }
    }
  },
  "textsettings": {
    "fields": [
      {
        "code": "font_color",
        "type": "color",
        "style": "color",
        "pseudoclasses": ["normal"]
      }
    ]
  }
}