<div class="rtds-input rtds-textarea">
<textarea id="" class=" rtds-text-sm rtds-input-placeholder" disabled></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>
{
"disabled": true
}
/**
* INPUT
*
*
*/
/**
* INPUT
*
*
*/
@layer components {
}
Componente campo di testo multiriga. Utilizzato come partial all’interno di input-field (03-molecules). Deve essere sempre accoppiato a una <label>.
Il componente viene renderizzato come <textarea> avvolto in un <div> contenitore. Supporta icone decorative a sinistra e icone di errore a destra.
default: Configurazione basedisabled: Campo non disponibile — escluso dal tab order, non inviato nel formreadonly: Campo non modificabile ma navigabile e inviato nel form — nessuno stile aggiuntivoLe classi
.has-icone.has-errorsono stati CSS applicati dinamicamente dal wrapper, non varianti Fractal indipendenti. Si attivano tramite i parametriiconPlaceholder/iconAlertehasError.
Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context
.config.ymlusati 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 forplaceholder (stringa, opzionale): Testo segnapostoclasses (stringa, opzionale): Classi CSS aggiuntive sull’elemento <textarea>padding (stringa, opzionale): Classe di padding personalizzataborder (stringa, opzionale): Classe di bordo personalizzataradius (stringa, opzionale): Classe di border-radius personalizzatarows (numero, opzionale): Numero di righe visibilicols (numero, opzionale): Numero di colonne visibiliiconPlaceholder (stringa, opzionale): ID icona decorativa a sinistraiconAlert (stringa, opzionale): ID icona di errore a destrashortLabel (stringa, opzionale): Etichetta breve stampata nel data-label; necessaria per la gestione degli errori via JSfieldRequired (booleano, opzionale): Se true, aggiunge aria-required="true" e il wrapper per il messaggio di erroreautocomplete (stringa, opzionale): Valore dell’attributo autocompleteariaDescribedBy (stringa, opzionale): ID dell’elemento descrittivo del campohasErrorControl (booleano, opzionale): Se true, aggiunge il wrapper per il messaggio di errore e collega aria-describedbydisabled (booleano, opzionale): Se true, aggiunge l’attributo disabled — il campo è non interattivo, escluso dal tab order e non inviato nel formreadonly (booleano, opzionale): Se true, aggiunge l’attributo readonly — il campo è non modificabile ma rimane nel tab order e viene inviato nel formariaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" per indicare il campo in erroreLivello AA — criteri pertinenti:
<label> tramite id/foraria-invalid e aria-describedby collegano il messaggio di errore<label> esplicita<textarea> — elemento nativo che garantisce interazione da tastiera e semantica form senza ARIA aggiuntivo<div> wrapper non ha ruolo semantico; serve solo come contenitore per il posizionamento delle icone| 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 |
:focus-visible è sempre visibile e non viene rimosso via CSSaria-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 focusaria-invalid="true" — lo screen reader annuncia lo stato di errore del campoaria-hidden="true" — lo screen reader le ignora.rtds-input: Stile base del wrapper.rtds-textarea: Modificatore aggiunto al wrapper per la variante textarea.has-error: Applicata al wrapper quando il campo è in errore.has-icon: Applicata al wrapper quando è presente un’icona decorativa<!-- 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>