Select¶

Select element represents a control that provides a menu of options.

select

Options¶

selectOptions¶

array List with options. Every object on the list must have "label" and "key".

JSON

{
  "options": {
    "selectOptions" : [
      { "key" : "option_1", "label" : "Option 1" },
      { "key" : "option_2", "label" : "Option 2" },
      { "key" : "option_3", "label" : "Option 3" }
    ]
  }
}

selectOptions.key¶

string Represents value in option.

example result

<select name="...">
  <option value="selectOptions.KEY">...</option>
</select>

selectOptions.label¶

string Represents label for option.

example result

<select name="...">
  <option value="...">selectOptions.LABEL</option>
</select>

isWithSearch¶

int Optional parameter. Accepted values: 0 and 1. When 1 given, in select will show input to search option on the list.

Build-in Validators¶

Element validates if given value is located on your selectOptions list.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element supports relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "select",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : string,
  "<element_options>" : {
    "<element_option_isWithSearch>" : int,
    "<element_option_selectOptions>" : [
      {"<selectOptions_key>": string, "<selectOptions_label>": string},
      {"<selectOptions_key>": string, "<selectOptions_label>": string}
    ]
  }
}

example

{
    "type": "select",
    "name": "type",
    "label": "Button type",
    "isRequired" : true,
    "defaultValue": "primary",
    "options": {
        "isWithSearch" : 0,
        "selectOptions": [
            { "key": "primary", "label": "Primary" },
            { "key": "secondary", "label": "Secondary" },
            { "key": "outline", "label": "Outline" },
            { "key": "ghost", "label": "Ghost (text only)" }
        ]
    }
}

The result element may look different, but for documentation purposes, you can see below how your configuration will look.

example result

<label for="type">Button type</label>
<select name="type">
  <option value="primary" selected>Primary</option>
  <option value="secondary">Secondary</option>
  <option value="outline">Outline</option>
  <option value="ghost">Ghost (text only)</option>
</select>

Element value¶

If value is filled: string.

usage in module TWIG

<a class="btn btn_{{ moduleConfig.type }}">
    Content
</a>