textarea¶
The textarea
macro is used to render a textarea control with some additional attributes and options if specified.
Definition¶
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¶
-
form controls
-
checkboxes
-
inputs
-
radios
-
switches
-
textareas
-
file_picker
-
select
-