Skip to content

control_textarea

The control_textarea macro is used to render a textarea wrapped in control connector and other elements that help to use it as a proper form element.

Definition

{% control_textarea(options) %}

Input parameters

options

object represents an object of radio options and attributes:

Option key Type Default Required Description
options.id string "" yes Id attribute of the textarea
options.name string "" yes Name attribute of the textarea
options.error boolean false no If set to true, appropriate styling class will be added to the textarea
options.controlValidators object null no Object of additional textarea validators
options.label string "" yes Text content of the label of the textarea
options.placeholder string "" no Placeholder attribute of the textarea

options.controlValidators

object represents an object of additional textarea validators

Option key Type Default Required Description
options.controlValidators.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to textarea
options.controlValidators.required boolean false no If set to true, required attribute and appropriate styling class will be added to textarea
options.controlValidators.hidden boolean false no If set to true, hidden attribute will be added to the textarea
options.controlValidators.readonly boolean false no If set to true, readonly attribute will be added to the textarea

Example

In this example we render a basic textarea.

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

{{
    control_textarea({
        id: 'contact-content',
        name: 'content',
        label: 'Contact message'
    })
}}

Example

In this example we render a disabled textarea

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

{{
    control_textarea({
        id: 'contact-content',
        name: 'content',
        label: 'Contact message',
        controlValidators: {
            disabled: true
        }
    })
}}

Example

In this example we render a required textarea with error styling and a placeholder 

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

{{
    control_textarea({
        id: 'contact-content',
        name: 'content',
        label: 'Contact message',
        controlValidators: {
            required: true
        }
        error: true,
        placeholder: 'Enter a message...'
    })
}}

Macro source code

{% macro control_textarea(options) %}
    {% set textareaErrorClass = options.error ? 'textarea_error' : '' %}
    {% set textareaDisabledClass = options.disabled ? 'textarea_disabled' : '' %}

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

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

            <h-control-content class="control">
                <h-control-element class="control__element">
                    <h-textarea
                        controlId="{{ options.id }}"
                        controlName="{{ options.name }}"
                        class="{{ textareaErrorClass }} {{ textareaDisabledClass }}"
                        {{ validators }}
                    >
                            <h-textarea-control placeholder="{{ options.placeholder }}"></h-textarea-control>
                    </h-textarea>
                </h-control-element>

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

Form reference

Webcomponents reference