Skip to content

textarea

The textarea macro is used to render a textarea control with some additional attributes and options if specified.

Definition

{% textarea(options) %}

Input parameters

options (optional)

object parameter represents an object of textarea options 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.disabled boolean false no If set to true, disabled attribute and appropriate styling class will be added to textarea
options.required boolean false no If set to true, required attribute and appropriate styling class will be added to textarea
options.readonly boolean false no If set to true, readonly attribute and appropriate styling class will be added to textarea
options.hidden boolean false no If set to true, hidden attribute and appropriate styling class will be added to textarea
options.value string "" no Value attribute of the textarea
options.placeholder string "" no Placeholder attrribute of the textarea.

Example

In this example we render a basic textarea. In all examples we will also use additional control classes and elements that help to style the input properly.

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            {{ textarea({
                id: 'order-message-1',
                name: 'order-message',
            }) }}
        </div>
    </div>
</div>

Example

In this example we render a required textarea with a placeholder

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            {{ textarea({
                id: 'order-message-1',
                name: 'order-message',
                required: true,
                placeholder: 'Enter your message here...'
            }) }}
        </div>
    </div>
</div>

Example

In this example we render a textarea with a custom value and error styling

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

<div class="control">
    <div class="control__content">
        <div class="control__element">
            {{ textarea({
                id: 'order-message-1',
                name: 'order-message',
                value: 'My message',
                error: true
            }) }}
        </div>
    </div>
</div>

Macro source code

{% macro textarea(options) %}
    {% from "@macros/textarea_control.twig" import textarea_control %}

    <div class="textarea {% if options.error %}textarea_error{% endif %} {% if options.disabled %}textarea_disabled{% endif %}">
        {{ textarea_control(options) }}
    </div>
{% endmacro %}

Form reference