EC System

Text areas

Documentation • Demo

Text areas

{#
  Parameters:
    - "id" (string) (default: 'default-id')
    - "name" (string) (default: 'default-name')
    - "rows" (integer) (default: 4): number of rows
    - "is_disabled" (boolean) (default: false)
    - "has_error" (boolean) (default: false)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}
{% include '@ecl/generic-component-form-textarea' %}
 
/* Default */
{
  "id": "example-textarea-id-1",
  "extra_attributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}


/* Is Disabled */
{
  "id": "example-textarea-id-2",
  "is_disabled": true,
  "extra_attributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}


/* Has Error */
{
  "id": "example-textarea-id-3",
  "has_error": true,
  "extra_attributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}


<!-- Default -->
<textarea name="default-name" id="example-textarea-id-1" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" placeholder="Some placeholder text.">
</textarea>


<!-- Is Disabled -->
<textarea name="default-name" id="example-textarea-id-2" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" disabled placeholder="Some placeholder text.">
</textarea>


<!-- Has Error -->
<textarea name="default-name" id="example-textarea-id-3" rows="4" class="ecl-textarea ecl-textarea--has-error" role="textbox" aria-multiline="true" placeholder="Some placeholder text.">
</textarea>
  • Content: 
    /**
 * Textarea component
 * @define textarea
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-form-textarea/generic-component-form-textarea';

// Use generic mixin
@include exports('ec-component-form-textarea') {
  @include ecl-textarea();
}
  • URL: /components/raw/ec-component-form-textarea/ec-component-form-textarea.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-textarea/ec-component-form-textarea.scss
  • Size: 290 Bytes
  • Handle: @ecl/ec-component-form-textarea
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-textarea/ec-component-form-textarea.twig