Skip to content

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

{% control_select(options) %}

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

Webcomponents reference

Object Api methods reference