D.School Component Library

Textarea: Error 

<div class="o-textarea is-error o-form__item">
      <label for="textarea-name">
          Label
      </label>
      <textarea id="textarea-name" name="textarea-name" rows="5" cols="10"></textarea>
      <span class="o-notification">
          <span class="o-notification__icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23ZM12.5 18.7C11.67 18.7 11 18.03 11 17.2C11 16.37 11.67 15.7 12.5 15.7C13.33 15.7 14 16.37 14 17.2C14 18.03 13.33 18.7 12.5 18.7ZM11.5 6.25H13.5L14.24 7.11L13.24 13.86H11.76L10.76 7.11L11.5 6.25Z" />
              </svg>
          </span>
          This is an error message.
      </span>
  </div>
 
{% set base_class = textarea.base_class|default('o-textarea') %}
{% if textarea.name %}
  <div class="{{ bem(base_class, textarea.element, textarea.modifiers, textarea.extra) }}{{ textarea.error ? ' is-error' }}{{ textarea.attributes.disabled ? ' is-disabled' }} o-form__item" {{ attributes(textarea.container.attributes) }}>
    {% if textarea.label %}
      <label for="{{ textarea.name }}"{{ textarea.label_hidden ? ' class="is-visually-hidden"' }}>
        {{ textarea.label }}
        {% if textarea.attributes.required %}
          <span class="o-asterisk">*</span>
        {% endif %}
      </label>
    {% endif %}
    <textarea id="{{ textarea.name }}" name="{{ textarea.name }}" rows="{{ textarea.rows }}" cols="{{ textarea.cols }}" {{ attributes(textarea.attributes) }}></textarea>
    {% include "@field-note" with textarea %}
    {% include "@notification" with textarea %}
  </div>
{% endif %}
 
{
  "textarea": {
    "name": "textarea-name",
    "label": "Label",
    "rows": 5,
    "cols": 10,
    "field_note": false,
    "error": true,
    "notification": {
      "text": "This is an error message."
    }
  }
}

No notes defined.