Copy environment

Textarea 

<div class="textfield textarea">
    <label class="textfield__label  " for="text1">
        Textarea label
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input" id="text1" name="textarea"></textarea>

    </div>
</div>
 
{% set input %}
    <textarea
        class="textfield__input textarea__input"
        id="{{ data.id }}"
        name="{{ data.name }}"
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}
    >{{ data.value }}</textarea>
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'textarea'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Textarea label",
    "id": "text1",
    "name": "textarea"
  }
}
  • Content: 
    .textarea__input {
    display: block;
    padding: 16px;

    height: 120px;
    resize: vertical;
    overflow: auto;
}
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 122 Bytes
  • Content: 
    import '../textfield/textfield';

import './textarea.scss';
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 60 Bytes
  • Handle: @textarea--default
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield
  • Referenced by (1): @checkout-form

Invalid 

<div class="textfield textarea is-invalid">
    <label class="textfield__label  " for="text1">
        Textarea label
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input" id="text1" name="textarea">Olime 1. oktoobril kontoris ja tegime uue textarea componendi</textarea>

    </div>
    <div class="textfield__error">
        Please check your input
    </div>
</div>
 
{% set input %}
    <textarea
        class="textfield__input textarea__input"
        id="{{ data.id }}"
        name="{{ data.name }}"
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}
    >{{ data.value }}</textarea>
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'textarea'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Textarea label",
    "id": "text1",
    "name": "textarea",
    "isInvalid": true,
    "error": "Please check your input",
    "value": "Olime 1. oktoobril kontoris ja tegime uue textarea componendi"
  }
}
  • Content: 
    .textarea__input {
    display: block;
    padding: 16px;

    height: 120px;
    resize: vertical;
    overflow: auto;
}
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 122 Bytes
  • Content: 
    import '../textfield/textfield';

import './textarea.scss';
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 60 Bytes
  • Handle: @textarea--invalid
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield

Disabled 

<div class="textfield textarea is-disabled">
    <label class="textfield__label  " for="text1">
        Textarea label
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input" id="text1" name="textarea" disabled>Tere</textarea>

    </div>
</div>
 
{% set input %}
    <textarea
        class="textfield__input textarea__input"
        id="{{ data.id }}"
        name="{{ data.name }}"
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}
    >{{ data.value }}</textarea>
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'textarea'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Textarea label",
    "id": "text1",
    "name": "textarea",
    "isDisabled": true,
    "value": "Tere"
  }
}
  • Content: 
    .textarea__input {
    display: block;
    padding: 16px;

    height: 120px;
    resize: vertical;
    overflow: auto;
}
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 122 Bytes
  • Content: 
    import '../textfield/textfield';

import './textarea.scss';
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 60 Bytes
  • Handle: @textarea--disabled
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield

Hidden Label 

<div class="textfield textarea">
    <label class="textfield__label  h-visually-hidden" for="text1">
        Textarea label
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input" id="text1" name="textarea"></textarea>

    </div>
</div>
 
{% set input %}
    <textarea
        class="textfield__input textarea__input"
        id="{{ data.id }}"
        name="{{ data.name }}"
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}
    >{{ data.value }}</textarea>
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'textarea'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Textarea label",
    "id": "text1",
    "name": "textarea",
    "isLabelHidden": true
  }
}
  • Content: 
    .textarea__input {
    display: block;
    padding: 16px;

    height: 120px;
    resize: vertical;
    overflow: auto;
}
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 122 Bytes
  • Content: 
    import '../textfield/textfield';

import './textarea.scss';
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 60 Bytes
  • Handle: @textarea--hidden-label
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield