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>

Example of module¶

Twig¶

Twig

<div><b>{{ translate(moduleConfig.type) }}</b></div>

JSON configuration¶

JSON configuration

[
  {
    "label": "EXAMPLE",
    "state": "unfolded",
    "elements": [
      {
        "name": "type",
        "type": "select",
        "label": "Select an option",
        "isRequired": true,
        "options": {
          "selectOptions": [
            { "key": "prefix_select_1", "label": "Option 1" },
            { "key": "prefix_select_2", "label": "Option 2" },
            { "key": "prefix_select_3", "label": "Option 3" }
          ]
        }
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "prefix_select_1": "Opcja 1",
      "prefix_select_2": "Opcja 2",
      "prefix_select_3": "Opcja 3"
    },
    "en_US": {
      "prefix_select_1": "Option 1",
      "prefix_select_2": "Option 2",
      "prefix_select_3": "Option 3"
    }
  },
  "schema": {
    "pl_PL": {
      "Select an option" : "Wybierz opcję",
      "EXAMPLE" : "PRZYKŁAD",
      "Option 1": "Opcja 1",
      "Option 2": "Opcja 2",
      "Option 3": "Opcja 3"
    },
    "en_US": {
      "Select an option": "Select an option",
      "EXAMPLE" : "EXAMPLE",
      "Option 1": "Option 1",
      "Option 2": "Option 2",
      "Option 3": "Option 3"
    }
  }
}