Regione Toscana Design System

Input field component: Has Error 

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

    </label>

    <div class="rtds-input rtds-textarea has-icon has-error">
        <textarea id="textareaId" class="   rtds-text-sm rtds-input-placeholder rtds-pr-12 " aria-describedBy="textareaIdError" aria-invalid="true"></textarea>
        <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error" aria-hidden="true" focusable="false" role="img">
            <use href="../../icons.svg#outline--exclamation-circle" />
        </svg>

    </div>

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

        <span class="rtds-input-field__error" id="textareaIdError" aria-live="assertive">
            il campo *nome campo* non può essere vuoto
        </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",
  "textareaErrorDescription": "il campo *nome campo* non può essere vuoto",
  "textareaHasErrorControl": true,
  "textareaAriaInvalid": true,
  "textareaIconAlert": true,
  "textareaHasError": true
}
  • Content: 
    /**
 * INPUT FIELD
 *
*/
@layer components {
    .rtds-input-field.has-error textarea {
        @apply rtds-border-2 rtds-border-error-dark;
    }
}
  • URL: /components/raw/input-textarea/input-textarea.css
  • Filesystem Path: components/03-molecules/forms/input-textarea/input-textarea.css
  • Size: 148 Bytes

Input Textarea

Componente per la gestione di input di tipo textarea con supporto per accessibilità, validazione e gestione degli errori.

Varianti Predefinite

Il componente supporta diverse varianti preconfigurate:

  1. Default: Configurazione base del textarea
  2. is-required: Textarea obbligatorio
  3. has-error-markup: Textarea con markup per la gestione degli errori
  4. has-description: Textarea con descrizione aggiuntiva
  5. has-error: Textarea con stato di errore
  6. has-error-and-description: Textarea con stato di errore e descrizione

Accessibilità

Il componente implementa diverse caratteristiche di accessibilità:

  • Utilizzo di aria-required invece di required per una migliore accessibilità
  • Supporto per aria-describedby per descrizioni del campo
  • Gestione degli errori con aria-invalid e aria-live
  • Label associate correttamente agli input
  • Supporto per etichette nascoste ma disponibili per screen reader

Gestione Errori

Il componente supporta la gestione degli errori attraverso:

  • Messaggi di errore personalizzabili
  • Indicatori visivi di errore
  • Supporto per icona di alert
  • Attributi ARIA per la comunicazione dello stato di errore

Note

  • Il componente utilizza il sistema di classi RTDS per lo styling
  • Supporta l’integrazione con icone attraverso il componente icon
  • La gestione degli errori può essere personalizzata via JavaScript utilizzando l’attributo data-label
  • Il componente supporta dimensioni diverse attraverso le varianti di padding e border

Configurazioni per lo sviluppo in Nunjucks

Configurazioni del componente per l’implementazione in template Nunjucks:

  • label: etichetta del textarea
  • labelClasses: classi CSS aggiuntive per l’etichetta
  • hiddenLabel: true - se l’etichetta è visivamente nascosta (rimane disponibile per screen reader)
  • textareaShortLabel: versione abbreviata dell’etichetta utilizzata nell’attributo data-label (necessario per la gestione degli errori via JavaScript)
  • gap: valore - se è necessaria una regolazione della spaziatura interna (default: gap-1)
  • textareaId: ID univoco per il textarea
  • textareaPadding: personalizzazione del padding del textarea
  • textareaBorder: personalizzazione del bordo del textarea
  • textareaRadius: personalizzazione del raggio del bordo del textarea
  • textareaClasses: classi CSS aggiuntive per il textarea
  • textareaRows: numero di righe del textarea
  • textareaCols: numero di colonne del textarea
  • textareaPlaceholder: placeholder del textarea (nota: evitare l’uso di placeholder quando possibile)
  • textareaRequired: true - se il textarea è obbligatorio (stampa aria-required=”true” invece dell’attributo required, migliore per l’accessibilità)
  • textareaAutocomplete: valore - per la conformità all’accessibilità, aiuta con l’autocompletamento dei dati (valori possibili disponibili qui: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
  • textareaAriaDescribedBy: valore - se c’è una descrizione per il campo, ID della descrizione
  • textareaHasErrorControl: true - se il textarea necessita di validazione (es: formato email)
  • textareaDescription: valore - se è necessaria una descrizione per il campo (richiede anche un ID via textareaAriaDescribedBy)
  • textareaAriaInvalid: true - se è necessario un textarea con errore
  • textareaIconPlaceholder: ID dell’icona - se è necessaria un’icona placeholder (prima del placeholder/valore)
  • textareaIconAlert: ID dell’icona - se è necessaria un’icona di alert
  • textareaHasError: true - per textarea con errore (stile del textarea)
  • textareaErrorDescription: valore - se è necessaria una descrizione dell’errore (richiede anche un ID via textareaAriaDescribedError)