<div class="rtds-input-field rtds-gap-1 ">
<label for="textareaId" class="rtds-input-field__label">
Text label
</label>
<div class="rtds-input rtds-textarea">
<textarea id="textareaId" class=" rtds-text-sm rtds-input-placeholder" aria-describedBy="textareaIdError"></textarea>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__error" id="textareaIdError" aria-live="assertive">
</span>
</span>
</div>
<div class="rtds-input-field{% if gap %} {{ gap }}{% else %} rtds-gap-1{% endif %}{% if classes %} {{ classes }}{% endif %} {% if textareaHasError %} has-error{% endif %}">
<label for="{{ textareaId }}" class="rtds-input-field__label{% if hiddenLabel %} rtds-sr-only{% endif %}{% if labelClasses %} {{ labelClasses }}{% endif %}">
{{ label }}
{% if textareaRequired %}
<abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
{% endif %}
</label>
{% block input %}
{% render '@textarea', { 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 }, true %}
{% endblock %}
{% if textareaRequired or textareaAriaDescribedBy or textareaHasErrorControl %}
<span class="rtds-input-field__hint">
{% if textareaRequired or textareaHasErrorControl %}
<span class="rtds-input-field__error" id="{{ textareaId }}Error" aria-live="assertive">
{{ textareaErrorDescription }}
</span>
{% endif %}
{% if textareaDescription %}
<span class="rtds-input-field__description" id="{{ textareaAriaDescribedBy }}">
{{ textareaDescription }}
</span>
{% endif %}
</span>
{% endif %}
</div>
{
"label": "Text label",
"textareaId": "textareaId",
"textareaAriaDescribedError": "idTextareaErrorDescription",
"textareaHasErrorControl": true
}
/**
* INPUT FIELD
*
*/
@layer components {
.rtds-input-field.has-error textarea {
@apply rtds-border-2 rtds-border-error-dark;
}
}
Componente per la gestione di input di tipo textarea con supporto per accessibilità, validazione e gestione degli errori.
Il componente supporta diverse varianti preconfigurate:
Il componente implementa diverse caratteristiche di accessibilità:
aria-required invece di required per una migliore accessibilitàaria-describedby per descrizioni del campoaria-invalid e aria-liveIl componente supporta la gestione degli errori attraverso:
Configurazioni del componente per l’implementazione in template Nunjucks: