Regione Toscana Design System Design System Servizi

Textarea element 

<div class="rtds-input rtds-textarea">
    <textarea id="" class="   rtds-text-sm rtds-input-placeholder"></textarea>
</div>
 
<div class="rtds-input rtds-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: 'rtds-absolute rtds-left-3 rtds-content-placeholder', size: inputIconSize}, true %}
    {% endif -%}
      <textarea
        id="{{ id }}"
        class="{{ padding }} {{ radius }} {{ border }} rtds-text-sm rtds-input-placeholder{% if classes %} {{ classes }}{% endif %}{% if iconPlaceholder %} rtds-pl-12 {% endif %}{% if iconAlert %} rtds-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 %}
        {% if disabled %} disabled{% endif %}
        {% if readonly %} readonly{% endif %}
        ></textarea>
      {%- if iconAlert %}
        {% render '@icon', {id: 'outline--exclamation-circle', classes: 'rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error', size: 'rtds-w-6 rtds-h-6'}, true %}
      {% endif -%}
  </div>
 
/* No context defined. */

Textarea

Componente campo di testo multiriga. Utilizzato come partial all’interno di input-field (03-molecules). Deve essere sempre accoppiato a una <label>.

Comportamento

Il componente viene renderizzato come <textarea> avvolto in un <div> contenitore. Supporta icone decorative a sinistra e icone di errore a destra.

Varianti

Varianti di Stato

  • default: Configurazione base
  • disabled: Campo non disponibile — escluso dal tab order, non inviato nel form
  • readonly: Campo non modificabile ma navigabile e inviato nel form — nessuno stile aggiuntivo

Le classi .has-icon e .has-error sono stati CSS applicati dinamicamente dal wrapper, non varianti Fractal indipendenti. Si attivano tramite i parametri iconPlaceholder/iconAlert e hasError.

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.

  • id (stringa, obbligatorio): ID della <textarea>; serve anche per collegare la <label> tramite for
  • placeholder (stringa, opzionale): Testo segnaposto
  • classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento <textarea>
  • padding (stringa, opzionale): Classe di padding personalizzata
  • border (stringa, opzionale): Classe di bordo personalizzata
  • radius (stringa, opzionale): Classe di border-radius personalizzata
  • rows (numero, opzionale): Numero di righe visibili
  • cols (numero, opzionale): Numero di colonne visibili
  • iconPlaceholder (stringa, opzionale): ID icona decorativa a sinistra
  • iconAlert (stringa, opzionale): ID icona di errore a destra
  • shortLabel (stringa, opzionale): Etichetta breve stampata nel data-label; necessaria per la gestione degli errori via JS
  • fieldRequired (booleano, opzionale): Se true, aggiunge aria-required="true" e il wrapper per il messaggio di errore
  • autocomplete (stringa, opzionale): Valore dell’attributo autocomplete
  • ariaDescribedBy (stringa, opzionale): ID dell’elemento descrittivo del campo
  • hasErrorControl (booleano, opzionale): Se true, aggiunge il wrapper per il messaggio di errore e collega aria-describedby
  • disabled (booleano, opzionale): Se true, aggiunge l’attributo disabled — il campo è non interattivo, escluso dal tab order e non inviato nel form
  • readonly (booleano, opzionale): Se true, aggiunge l’attributo readonly — il campo è non modificabile ma rimane nel tab order e viene inviato nel form
  • ariaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" per indicare il campo in errore

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — il campo è associato alla <label> tramite id/for
  • 3.3.1 Identificazione degli errori — aria-invalid e aria-describedby collegano il messaggio di errore
  • 3.3.2 Etichette o istruzioni — il campo deve sempre essere accoppiato a una <label> esplicita
  • 4.1.2 Nome, Ruolo, Valore — attributi ARIA comunicano stato e vincoli

Struttura e semantica

  • Il componente è renderizzato come <textarea> — elemento nativo che garantisce interazione da tastiera e semantica form senza ARIA aggiuntivo
  • Il <div> wrapper non ha ruolo semantico; serve solo come contenitore per il posizionamento delle icone

Attributi ARIA

Attributo Valori Condizione
aria-required "true" quando fieldRequired è attivo
aria-describedby ID del messaggio di errore / di descrizione quando hasErrorControl, fieldRequired o ariaDescribedBy sono presenti
aria-invalid "true" quando ariaInvalid è attivo (campo in errore)
Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal componente

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • aria-required="true" — lo screen reader annuncia il campo come obbligatorio (preferito all’attributo required nativo per maggiore compatibilità)
  • aria-describedby — collega il campo al <div id="{id}Error"> con il messaggio di errore; lo screen reader legge il messaggio quando il campo ottiene il focus
  • aria-invalid="true" — lo screen reader annuncia lo stato di errore del campo
  • Le icone decorative interne al wrapper hanno aria-hidden="true" — lo screen reader le ignora

Stili CSS

Classi Base

  • .rtds-input: Stile base del wrapper
  • .rtds-textarea: Modificatore aggiunto al wrapper per la variante textarea

Classi di stato

  • .has-error: Applicata al wrapper quando il campo è in errore
  • .has-icon: Applicata al wrapper quando è presente un’icona decorativa

Esempi di utilizzo

<!-- Textarea base -->
<div class="rtds-input rtds-textarea">
  <textarea id="messaggio" placeholder="Inserisci il messaggio"></textarea>
</div>

<!-- Textarea in stato di errore -->
<div class="rtds-input rtds-textarea has-error">
  <textarea id="messaggio-err" aria-invalid="true" aria-describedby="messaggioError"></textarea>
  <div id="messaggioError">Il messaggio non può essere vuoto</div>
</div>