Copy environment

Textarea

<div class="textfield textarea">
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input " id="text1" name="textarea"></textarea>

        <label class="textfield__label text-button " for="text1">
            Textarea label
        </label>
    </div>
</div>
{% set input %}
    <textarea
        class="textfield__input textarea__input {{ class }}"
        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;
        resize: none;
        height: 120px;
        font-size: 14px;
        font-weight: 400;
        padding-left: 0;
    }
    
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 142 Bytes
  • Content:
    import '@textfield';
    
    import './textarea.scss';
    
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 48 Bytes
  • Handle: @textarea--default
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield

Invalid

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

        <label class="textfield__label text-button " for="text1">
            Textarea label
        </label>
    </div>
    <div class="textfield__error text-small">
        Please check your input
    </div>
</div>
{% set input %}
    <textarea
        class="textfield__input textarea__input {{ class }}"
        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;
        resize: none;
        height: 120px;
        font-size: 14px;
        font-weight: 400;
        padding-left: 0;
    }
    
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 142 Bytes
  • Content:
    import '@textfield';
    
    import './textarea.scss';
    
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 48 Bytes
  • Handle: @textarea--invalid
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield

Disabled

<div class="textfield textarea is-dirty is-disabled">
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input " id="text1" name="textarea" disabled>Tere</textarea>

        <label class="textfield__label text-button " for="text1">
            Textarea label
        </label>
    </div>
</div>
{% set input %}
    <textarea
        class="textfield__input textarea__input {{ class }}"
        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;
        resize: none;
        height: 120px;
        font-size: 14px;
        font-weight: 400;
        padding-left: 0;
    }
    
  • URL: /components/raw/textarea/textarea.scss
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.scss
  • Size: 142 Bytes
  • Content:
    import '@textfield';
    
    import './textarea.scss';
    
  • URL: /components/raw/textarea/textarea.ts
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.ts
  • Size: 48 Bytes
  • Handle: @textarea--disabled
  • Filesystem Path: src/patterns/components/forms/textarea/textarea.twig
  • References (1): @textfield