Regione Toscana Design System — Servizi Design System Core

Input field component: Has Description 

<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="idTextareaDescription"></textarea>
    </div>

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

        <span class="rtds-input-field__description" id="idTextareaDescription">
            descrizione
        </span>

    </span>

</div>
 
<div class="rtds-input-field{% if gap %} {{ gap }}{% else %} rtds-gap-1{% endif %}{% if classes %} {{ classes }}{% endif %}{% if textareaDisabled %} rtds-input-field--disabled{% 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, disabled: textareaDisabled, readonly: textareaReadonly }, 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",
  "textareaAriaDescribedBy": "idTextareaDescription",
  "textareaDescription": "descrizione"
}
  • Content: 
    /**
 * INPUT FIELD
 *
*/
.rtds-input-field.has-error textarea {
    border-width: 2px;
    border-color: var(--color-error-dark);
}
  • URL: /components/raw/input-textarea/input-textarea.built.css
  • Filesystem Path: components/03-molecules/forms/input-textarea/input-textarea.built.css
  • Size: 132 Bytes
  • 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
  • Handle: @input-textarea--has-description
  • Preview:
  • Filesystem Path: components/03-molecules/forms/input-textarea/input-textarea.njk
  • References (1): @textarea

Input Textarea

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

Comportamento

Il componente è renderizzato come <div class="rtds-input-field"> contenente una <label> e il componente @textarea annidato. Supporta stati di errore, descrizione e obbligatorietà.

Varianti

Varianti di Stato

  • default: Configurazione base del textarea
  • is-required: Textarea obbligatorio
  • has-error-markup: Textarea con markup per la gestione degli errori
  • has-description: Textarea con descrizione aggiuntiva
  • has-error: Textarea con stato di errore
  • has-error-and-description: Textarea con stato di errore e descrizione
  • disabled: Textarea non disponibile — escluso dal tab order, non inviato nel form; label appare muted
  • readonly: Textarea non modificabile ma navigabile e inviato nel form

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • label (stringa, obbligatorio): Etichetta del textarea
  • textareaId (stringa, obbligatorio): ID univoco per il textarea
  • labelClasses (stringa, opzionale): Classi CSS aggiuntive per l’etichetta
  • hiddenLabel (booleano, opzionale): Se true, nasconde visivamente l’etichetta (rimane disponibile per screen reader)
  • textareaShortLabel (stringa, opzionale): Versione abbreviata dell’etichetta per l’attributo data-label
  • gap (stringa, opzionale): Regolazione della spaziatura interna (default: gap-1)

Parametri di Stile

  • textareaPadding (stringa, opzionale): Personalizzazione del padding del textarea
  • textareaBorder (stringa, opzionale): Personalizzazione del bordo del textarea
  • textareaRadius (stringa, opzionale): Personalizzazione del raggio del bordo del textarea
  • textareaClasses (stringa, opzionale): Classi CSS aggiuntive per il textarea
  • textareaRows (numero, opzionale): Numero di righe del textarea
  • textareaCols (numero, opzionale): Numero di colonne del textarea
  • textareaPlaceholder (stringa, opzionale): Placeholder del textarea (evitare quando possibile)

Parametri di Accessibilità

  • textareaRequired (booleano, opzionale): Se true, stampa aria-required="true" invece dell’attributo required
  • textareaAutocomplete (stringa, opzionale): Valore per l’autocompletamento (valori: MDN Web Docs)
  • textareaAriaDescribedBy (stringa, opzionale): ID della descrizione del campo
  • textareaDescription (stringa, opzionale): Testo descrittivo del campo (richiede textareaAriaDescribedBy)
  • textareaHasErrorControl (booleano, opzionale): Se true, attiva la validazione del textarea
  • textareaAriaDescribedError (stringa, opzionale): ID dell’elemento con il messaggio di errore (collegato tramite aria-describedby)
  • textareaAriaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" al textarea
  • textareaIconPlaceholder (stringa, opzionale): ID dell’icona placeholder
  • textareaIconAlert (booleano, opzionale): Se true, mostra l’icona di errore (⚠) a destra del textarea
  • textareaHasError (booleano, opzionale): Applica lo stile di errore al textarea
  • textareaErrorDescription (stringa, opzionale): Testo del messaggio di errore (richiede textareaAriaDescribedError)
  • textareaDisabled (booleano, opzionale): Se true, aggiunge disabled al textarea e la classe rtds-input-field--disabled al wrapper — label appare muted
  • textareaReadonly (booleano, opzionale): Se true, aggiunge readonly al textarea — nessuno stile aggiuntivo, label invariata, valore inviato nel form

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la <label> è sempre associata al <textarea> tramite for / id; i messaggi di errore e le descrizioni sono collegati tramite aria-describedby
  • 3.3.1 Identificazione degli errori — gli errori sono comunicati tramite aria-invalid e annunciati con aria-live="assertive"
  • 3.3.2 Etichette o istruzioni — ogni campo ha una <label> visibile o nascosta disponibile per screen reader
  • 4.1.2 Nome, ruolo, valore — aria-required, aria-describedby e aria-invalid comunicano lo stato del campo (gestiti sul <textarea> interno)

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-input-field"> contenente una <label> e il componente @textarea annidato
  • La <label> è associata al textarea tramite for="" e rimane disponibile anche quando nascosta visivamente tramite rtds-sr-only
  • L’indicatore di campo obbligatorio è un <abbr title="obbligatorio">*</abbr> nella label
  • I messaggi di errore sono racchiusi in <span aria-live="assertive"> per garantire l’annuncio immediato agli screen reader

Attributi ARIA

Attributo Valori Condizione
aria-required "true" quando textareaRequired è true (gestito sul <textarea> interno)
aria-describedby ID del messaggio di errore e/o descrizione quando presenti errori o descrizione (gestito sul <textarea> interno)
aria-invalid "true" quando textareaAriaInvalid è true (gestito sul <textarea> interno)
aria-live "assertive" sullo span del messaggio di errore

Screen reader

  • Quando la label è nascosta (hiddenLabel: true), rimane disponibile per screen reader tramite rtds-sr-only
  • I messaggi di errore vengono annunciati immediatamente grazie ad aria-live="assertive"
  • L’indicatore di obbligatorietà (*) è leggibile tramite l’attributo title="obbligatorio" sull’<abbr>

Esempi di utilizzo

<!-- Esempio base -->
<div class="rtds-input-field rtds-gap-1">
  <label for="message" class="rtds-input-field__label">Messaggio</label>
  <textarea id="message" name="message" rows="4"></textarea>
</div>

<!-- Esempio obbligatorio con errore -->
<div class="rtds-input-field rtds-gap-1 rtds-input-field--has-error">
  <label for="message-req" class="rtds-input-field__label">
    Messaggio <abbr title="obbligatorio">*</abbr>
  </label>
  <textarea id="message-req" name="message" rows="4"
            aria-required="true" aria-invalid="true" aria-describedby="message-error"></textarea>
  <span class="rtds-input-field__hint">
    <span id="message-error" aria-live="assertive" class="rtds-input-field__error">
      Il campo messaggio non può essere vuoto
    </span>
  </span>
</div>

Note

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