control_select¶
The control_select
macro is used to render a select wrapped in control connector and other elements necessary to use it as a form element.
Definition¶
Input parameters¶
options¶
object
represents an object of select options and attributes
Option key | Type | Default | Required | Description |
---|---|---|---|---|
options.id | string |
"" | yes | Id attribute of the select |
options.name | string |
"" | yes | Name attribute of the select |
options.options | object[] |
"" | yes | Array containing objects with option related fields |
options.value | string |
"" | no | Id of the option selected by default |
options.label | string |
"" | no | Text displayed on the select label |
options.error | boolean |
false | no | If set to true , appropriate styling class will be added to the select |
options.disabled | boolean |
false | no | If set to true , disabled attribute and appropriate styling class will be added to select |
options.required | boolean |
false | no | If set to true , required attribute and appropriate styling class will be added to select |
options.hidden | boolean |
false | no | If set to true , hidden attribute and appropriate styling class will be added to select |
options.noMargin | boolean |
false | no | If set to true , an additional class removing margin will be added to the select |
options.options¶
object[]
represents an array of objects containing select option fields
Option key | Type | Default | Required | Description |
---|---|---|---|---|
options.id | string |
"" | yes | Unique of the option |
options.name | string |
"" | yes | Text content of the option |
Example¶
In this example we display a basic control select
{% from "@macros/control_select.twig" import control_select %}
{{ control_select({
id: 'contact-country',
name: 'country',
options: [
{
id: '1',
name: 'United States'
},
{
id: '2',
name: 'Canada'
},
{
id: '3',
name: 'Mexico'
}
]
}) }}
Example¶
In this example we display a required control select with a label and a selected option by default.
{% from "@macros/control_select.twig" import control_select %}
{{ control_select({
id: 'contact-country',
name: 'country',
options: [
{
id: '1',
name: 'United States'
},
{
id: '2',
name: 'Canada'
},
{
id: '3',
name: 'Mexico'
}
],
required: true,
value: '2',
label: 'Select a country'
}) }}
Example¶
In this example we use a real world example and display a list of control select elements in additional fields of a contact form. To get additional fields of a contact form we use a getContactAdditionalFields() method from ObjectApi.
{% from "@macros/control_select.twig" import control_select %}
{% set additionalFields = ObjectApi.getContactAdditionalFields() %}
{% for field in additionalFields %}
{% if field.isSelect %}
{{
control_select({
name: "additional_#{ field.id }",
label: field.name,
id: field.id,
required: field.isRequired,
hidden: field.isHidden,
options: field.options
})
}}
{% endif %}
{% endfor %}
Macro source code¶
{% macro control_select(options) %}
{% set selectErrorClass = options.error ? 'select_error' : '' %}
{% set selectDisabledClass = options.disabled ? 'select_disabled' : '' %}
<control-connector
class="control {% if options.noMargin %} control_no-margin {% endif %}"
{% if options.hidden %} hidden {% endif %}
>
<h-control>
<h-control-content class="control">
<h-control-element class="control__element">
<h-select
class="select"
control-name="{{ options.name }}"
control-id="{{ options.id }}"
class="{{ selectErrorClass }} {{ selectDisabledClass }}"
{% if options.disabled %} disabled {% endif %}
>
<label
class="select__title label {% if options.required %} label_required {% endif %}"
for="{{ options.id }}"
>
{{ options.label }}
</label>
<h-select-toggler class="select-toggler" aria-label="{{ translate('Select') }}"></h-select-toggler>
{% for option in options.options %}
<h-option value="{{ option.id }}" {% if option.id in options.value %}selected{% endif %}>
<h-option-content>{{ option.name }}</h-option-content>
</h-option>
{% endfor %}
</h-select>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
{% endmacro %}
Form reference¶
-
form controls
-
checkboxes
-
inputs
-
radios
-
switches
-
textareas
-
file_picker
-
select
-