Skip to content

control_input

The control_input macro is used to render an input wrapped in control connector and other elements necessary to use it as a form element.

Definition

{% control_input(options) %}

Input parameters

options

options represents an object of input attributes

Option key Type Default Required Description
options.id string "" yes Id attribute of the input
options.name string "" yes Name attribute of the input
options.type string "" no Type attribute of the input
options.value string "" no Value attribute of the input
options.placeholder string "" no Placeholder attribute of the input
options.error boolean false no If set to true, appropriate styling class will be added to the input
options.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to radio
options.controlValidators object null no Object of additional input validators
options.unit string "" no Unit value displayed on the right side of the input
options.label string "" no Text displayed on the input label
options.noMargin string "" no If set to true, an additional class removing margin will be added to the input element
options.iconName string "" no Name of the icon displayed on the input label

options.controlValidators

object represents an object of additional input validators

Option key Type Default Required Description
options.controlValidators.email boolean false no If set to true, email attribute class will be added to the input
options.controlValidators.required boolean false no If set to true, required attribute will be added to the input
options.controlValidators.password boolean false no If set to true, password attribute will be added to the input
options.controlValidators.hidden boolean false no If set to true, hidden attribute will be added to the input
options.controlValidators.readonly boolean false no If set to true, readonly attribute will be added to the input

Example

In this example we display a basic control input 

{% from "@macros/control_input.twig" import control_input %}

{{ control_input({
    id: 'contact-name',
    name: 'name'
}) }}

Example

In this example we display a control input with additional email validation and a label

{% from "@macros/control_input.twig" import control_input %}

{{ control_input({
    id: 'email-1',
    name: 'email',
    type: 'email',
    controlValidators: {
        email: true
    },
    label: 'Enter your e-mail'
}) }}

Example

In this example we display a control input with a placeholder, value and a label with an icon that has error styling

{% from "@macros/control_input.twig" import control_input %}

{{ control_input({
    id: 'option-1',
    name: 'option',
    error: true,
    value: '1',
    placeholder: '4',
    label: 'Enter your age',
    iconName: 'icon-user'
}) }}

Macro source code

{% macro control_input(options) %}
    {% from "@macros/input_icon.twig" import input_icon %}
    {% from "@macros/input_unit.twig" import input_unit %}
    {% from "@macros/input_copy_button.twig" import input_copy_button %}

    {% set inputErrorClass = options.error ? 'input_error' : '' %}
    {% set inputDisabledClass = options.disabled ? 'input_disabled' : '' %}

    {% set validators %}
        {% for validatorName, validatorValue in options.controlValidators %}
            {% if validatorValue %} {{ validatorName }} {% endif %}
        {% endfor %}
    {% endset %}

    <control-connector
        class="control {% if options.noMargin %} control_no-margin {% endif %}"
        {{ validators }}
    >
        <h-control>
            <h-control-label
                class="
                    control__label
                    label
                    {% if options.disabled %} label_disabled {% endif %}
                    {% if options.controlValidators.required %} label_required {% endif %}
                "
            >
                <label for="{{ options.id }}">
                    {{ options.label }}

                    {% if options.iconName %}
                        {{ input_icon(options.iconName) }}
                    {% endif %}

                    {% if options.unit %}
                        {{ input_unit(options.unit) }}
                    {% endif %}
                </label>
            </h-control-label>

            <h-control-content class="control">
                <h-control-element class="control__element">
                    <h-input
                        controlId="{{ options.id}}"
                        controlName="{{ options.name }}"
                        placeholder="{{ options.placeholder }}"
                        {% if options.disabled %} disabled {% endif %}
                        {% if options.readonly %} readonly {% endif %}
                        {% if options.error %} error {% endif %}
                        {{ validators }}
                        class="{{ inputErrorClass }} {{ inputDisabledClass }}"
                        {% if options.type %} type="{{ options.type }}" {% endif %}
                    >
                        <h-input-control
                            {% if options.mask %} mask="{{ options.mask }}" {% endif %}
                            {% if options.pattern %} pattern="{{ options.pattern }}" {% endif %}
                            {% if options.validPattern %} valid-pattern="{{ options.validPattern }}" {% endif %}
                            value="{{ options.value }}"
                        ></h-input-control>

                        {% if options.copy %}
                            {{ input_copy_button({
                                inputId: options.id,
                                inputTextSuccess: translate('Copied!'),
                                copyPendingText: translate('Copy')
                            }) }}
                        {% endif %}
                    </h-input>
                </h-control-element>

                <control-errors></control-errors>
            </h-control-content>
        </h-control>
    </control-connector>
{% endmacro %}

Form reference

Webcomponents reference