Net7 UI Kit

Textarea element 

<div class="n7-input n7-textarea has-icon has-error">
    <textarea id="textareaId" class="textareaPadding textareaRadius textareaBorder text-sm n7-input-placeholder textareaClasses pr-12 " rows="textareaRows" cols="textareaCols" data-label="textareaShortLabel" placeholder="textareaPlaceholder" aria-required="true" autocomplete="textareaAutocomplete" aria-describedBy="textareaIdError textareaAriaDescribedBy" aria-invalid="true"></textarea>
    <svg class="n7-icon inline-block align-middle fill-current w-6 h-6 absolute right-4 n7-content-placeholder n7-content-error" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#outline--exclamation-circle" />
    </svg>

</div>
 
<div class="n7-input n7-textarea{% block size %}{% endblock %}{% if iconPlaceholder or iconAlert %} has-icon{% endif %}{% if hasError %} has-error{% endif %}">
  {% set errorId = id ~ 'Error' %}
    {%- if iconPlaceholder %}
      {% render '@icon', {id: iconPlaceholder, classes: 'absolute left-3 n7-content-placeholder', size: inputIconSize}, true %}
    {% endif -%}
      <textarea
        id="{{ id }}"
        class="{{ padding }} {{ radius }} {{ border }} text-sm n7-input-placeholder{% if classes %} {{ classes }}{% endif %}{% if iconPlaceholder %} pl-12 {% endif %}{% if iconAlert %} pr-12 {% endif %}"
        {% if rows %} rows="{{ rows }}"{% endif %}
        {% if cols %} cols="{{ cols }}"{% endif %}
        {% if shortLabel %} data-label="{{ shortLabel }}"{% endif %}
        {% if placeholder %} placeholder="{{ placeholder }}"{% endif %} 
        {% if fieldRequired %} aria-required="true"{% endif %}
        {% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}
        {% if ariaDescribedBy or hasErrorControl or fieldRequired %} aria-describedBy="
          {%- if hasErrorControl or fieldRequired -%}
          {{- errorId -}}
            {%- if ariaDescribedBy %} {{ ariaDescribedBy -}}{%- endif -%}
          {% elseif ariaDescribedBy -%}
          {{- ariaDescribedBy -}}
          {% endif %}"
        {% endif %}
        {% if ariaInvalid %} aria-invalid="true"{% endif %}
        ></textarea>
      {%- if iconAlert %}
        {% render '@icon', {id: 'outline--exclamation-circle', classes: 'absolute right-4 n7-content-placeholder n7-content-error', size: 'w-6 h-6'}, true %}
      {% endif -%}
  </div>
 
{
  "id": "textareaId",
  "shortLabel": "textareaShortLabel",
  "padding": "textareaPadding",
  "border": "textareaBorder",
  "radius": "textareaRadius",
  "rows": "textareaRows",
  "cols": "textareaCols",
  "classes": "textareaClasses",
  "placeholder": "textareaPlaceholder",
  "fieldRequired": "textareaRequired",
  "autocomplete": "textareaAutocomplete",
  "ariaDescribedBy": "textareaAriaDescribedBy",
  "hasErrorControl": "textareaHasErrorControl",
  "ariaInvalid": "textareaAriaInvalid",
  "iconAlert": "textareaIconAlert",
  "hasError": "textareaHasError"
}

Input component configurations.

  • iconPlaceholder: value - id for left icon
  • id: value - id of input
  • shortLabel: value - a shorter label printend in data-label attribute - needed for js error management
  • padding: value - input padding
  • border: value - input border
  • radius: value - input border radius
  • classes: value - input classes
  • rows: value - number of rows
  • cols: value - number of columns
  • placeholder: value - if a placeholder is needed
  • fieldRequired: true - if input is required (print aria-required=”true” instead of required attribute, better for accessibility; print error message wrapper and id for aria-describedby)
  • autocomplete: value - for accessibility compliance, helps with autofilling datas, possibile values available here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
  • ariaDescribedBy: value - if there’s a description for the field (used in input-field)
  • hasErrorControl: true - if input needs a validation (eg: email format - used in input-field)
  • ariaInvalid: true - if input with error is needed
  • alertIcon: value - id for right positioned alert icon