Net7 UI Kit

Textarea field component: Has Error 

<div class="n7-input-field gap-1  has-error">
    <label for="" class="n7-input-field__label">
        Text label

    </label>

    <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" 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>

    <span class="n7-input-field__hint">

        <span class="n7-input-field__error" id="Error" aria-live="assertive">
            il campo *nome campo* non può essere vuoto
        </span>

    </span>

</div>
 
<div class="n7-input-field{% if gap %} {{ gap }}{% else %} gap-1{% endif %}{% if classes %} {{ classes }}{% endif %} {% if textareaHasError or textarea.hasError %} has-error{% endif %}">
    <label for="{{ textarea.id }}" class="n7-input-field__label{% if hiddenLabel %} n7-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
        {{ label }}
        {% if textareaRequired or textarea.fieldRequired %}
            <abbr class="font-bold no-underline" title="obbligatorio">*</abbr>
        {% endif %}
    </label>
    {% block input %}
        {% render '@textarea', textarea, true %}
    {% endblock %}
    {% if textareaRequired or textarea.fieldRequired or textareaAriaDescribedBy or textarea.ariaDescribedBy or textareaHasErrorControl or textarea.hasErrorControl %}
        <span class="n7-input-field__hint">
            {% if textareaRequired or textarea.fieldRequired or textareaHasErrorControl or textarea.hasErrorControl %}
            <span class="n7-input-field__error" id="{{ textarea.id }}Error" aria-live="assertive">
                {{ textareaErrorDescription }}
            </span>
            {% endif %}
            {% if textareaDescription %}
            <span class="n7-input-field__description" id="{{ textareaAriaDescribedBy }}">
                {{ textareaDescription }}
            </span>
            {% endif %}
        </span>
    {% endif %}
</div>
 
{
  "label": "Text label",
  "textareaId": "textareaId",
  "textareaPlaceholder": "",
  "textareaHasError": true,
  "textareaIconAlert": true,
  "textarea": {
    "placeholder": "",
    "hasErrorControl": true,
    "ariaInvalid": true,
    "iconAlert": true,
    "hasError": true
  },
  "textareaHasErrorControl": true,
  "textareaErrorDescription": "il campo *nome campo* non può essere vuoto"
}
  • Content: 
    /**
 * INPUT FIELD
 *
*/
@layer components {
    .n7-input-field.has-error textarea {
        @apply border-2 n7-border-error-dark;
    }
}
  • URL: /components/raw/input-textarea/input-textarea.css
  • Filesystem Path: components/03-molecules/forms/input-textarea/input-textarea.css
  • Size: 139 Bytes

Composite textarea field component. Include textarea component, customized if needed with parameteres:

  • label: value - textarea label
  • labelClasses: value - classes for the label
  • hiddenLabel: true - if label is visually hidden - label is still available for screen readers
  • inputShortLabel: value - a shorter label printend in data-label attribute - needed for js error management
  • gap: value - if internal spacing adjustment is needed - default is gap-1
  • textareaId: pass id for textarea component
  • Padding: manage textarea padding override if needed
  • Border: manage textarea border width and color overrides if needed
  • Radius: manage textarea border radius overrides if needed
  • Classes: add more textarea classes if needed
  • Rows: value - number of rows
  • Cols: value - number of columns
  • Placeholder: add textarea placeholder if needed (note: avoid using placeholder if possibile)
  • Required: true - if textarea is required (print aria-required=”true” instead of required attribute, better for accessibility)
  • 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, id of the description
  • HasErrorControl: true - if textarea needs a validation (eg: email format)
  • Description: value - if description for field is needed - needs also an id (via textareaAriaDescribedBy)
  • AriaInvalid: true - if textarea with error is needed
  • IconPlaceholder: icon id - if icon placeholder (before placeholder/value) if needed
  • IconAlert: icon id - if alert icon is needed
  • HasError: true - for textarea with error (textarea style)
  • ErrorDescription: value - if error description is needed - needs also an id (via textareaAriaDescribedError)