Input element: Readonly

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="rtds-input">

    <input id="" class="rtds-text-sm rtds-input-placeholder" readonly>
</div>


        <div class="rtds-input{% block size %}{% endblock size %}{% if hasError %} has-error{% endif %}{% if iconPlaceholder %} has-icon{% endif %}">
  {% set errorId = id ~ 'Error' %}
  {% set isPickerType = (type == 'date' or type == 'time' or type == 'datetime-local' or type == 'month' or type == 'week') %}
    {%- if iconPlaceholder %}
      {% render '@icon', {id: iconPlaceholder, classes: 'rtds-input__icon', size: ''}, true %}
    {% endif -%}
      <input
        id="{{ id }}"
        class="{% if padding %}{{ padding }} {% endif %}{% if radius %}{{ radius }} {% endif %}{% if border %}{{ border }} {% endif %}rtds-text-sm rtds-input-placeholder{% if classes %} {{ classes }}{% endif %}{% if iconAlert %}{% if isPickerType %} rtds-pr-16{% else %} rtds-pr-12{% endif %}{% endif %}"
        {% if type %} type="{{ type }}"{% 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 %}
        >
      {%- if iconAlert %}
        {% set iconAlertClasses = 'rtds-absolute rtds-right-8 rtds-content-placeholder rtds-content-error' if isPickerType else 'rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error' %}
        {% render '@icon', {id: 'outline--exclamation-circle', classes: iconAlertClasses, size: 'rtds-w-6 rtds-h-6'}, true %}
      {% endif -%}
  </div>


        
            
            {
  "readonly": true
}

File:

Content:


                                /**
 * INPUT
 * 
 *
*/
.rtds-input {
    position: relative;
    display: flex;
    align-items: center;
}
.rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input [type='file'],
    .rtds-input textarea {
    width: 100%;
    border-radius: 0.5rem;
}
.rtds-input [type='file'] {
    padding: var(--spacing-1);
}
.rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input textarea {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
        border-color: var(--color-border-input);
    border-width: 1px;
}
.rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple] {
    height: var(--spacing-11);
}
/* ICON STYLES */
.rtds-input__icon {
    position: absolute;
    left: var(--spacing-4);
        color: var(--color-content-placeholder);
    width: var(--spacing-6);
    height: var(--spacing-6);
}
.rtds-input--sm .rtds-input__icon {
    left: var(--spacing-3);
    width: var(--spacing-4);
    height: var(--spacing-4);
}
.rtds-input--lg .rtds-input__icon {
    left: var(--spacing-4);
    height: var(--spacing-8);
    width: var(--spacing-8);
}
/* HAS ICON SIZE STYLE */
.has-icon.rtds-input [type='text'],
    .has-icon.rtds-input input:where(:not([type])),
    .has-icon.rtds-input [type='email'],
    .has-icon.rtds-input [type='url'],
    .has-icon.rtds-input [type='password'],
    .has-icon.rtds-input [type='number'],
    .has-icon.rtds-input [type='date'],
    .has-icon.rtds-input [type='datetime-local'],
    .has-icon.rtds-input [type='month'],
    .has-icon.rtds-input [type='search'],
    .has-icon.rtds-input [type='tel'],
    .has-icon.rtds-input [type='time'],
    .has-icon.rtds-input [type='week'],
    .has-icon.rtds-input [multiple],
    .has-icon.rtds-input textarea {
    padding-left: var(--spacing-12);
}
/* VALIDATION STYLES */
.is-invalid .rtds-input input,
    .rtds-input input[aria-invalid="true"],
    .has-error.rtds-input input {
    border-width: 2px;
    border-color: var(--color-error-dark);
}
/* DISABLED STATE */
.rtds-input input:disabled,
    .rtds-input textarea:disabled {
        color: var(--color-content-disabled);
        border-color: var(--color-border-gray-03);
        cursor: not-allowed;
    }
/* SIZE STYLES */
.rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple] {
    height: var(--spacing-8);
}
.rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple],
    .rtds-input--sm textarea {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}
.has-icon.rtds-input--sm [type='text'],
    .has-icon.rtds-input--sm input:where(:not([type])),
    .has-icon.rtds-input--sm [type='email'],
    .has-icon.rtds-input--sm [type='url'],
    .has-icon.rtds-input--sm [type='password'],
    .has-icon.rtds-input--sm [type='number'],
    .has-icon.rtds-input--sm [type='date'],
    .has-icon.rtds-input--sm [type='datetime-local'],
    .has-icon.rtds-input--sm [type='month'],
    .has-icon.rtds-input--sm [type='search'],
    .has-icon.rtds-input--sm [type='tel'],
    .has-icon.rtds-input--sm [type='time'],
    .has-icon.rtds-input--sm [type='week'],
    .has-icon.rtds-input--sm [multiple],
    .has-icon.rtds-input--sm textarea {
    padding-left: var(--spacing-10);
}
.rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple] {
    height: var(--spacing-14);
}
.rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple],
    .rtds-input--lg textarea {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}
.has-icon.rtds-input--lg [type='text'],
    .has-icon.rtds-input--lg input:where(:not([type])),
    .has-icon.rtds-input--lg [type='email'],
    .has-icon.rtds-input--lg [type='url'],
    .has-icon.rtds-input--lg [type='password'],
    .has-icon.rtds-input--lg [type='number'],
    .has-icon.rtds-input--lg [type='date'],
    .has-icon.rtds-input--lg [type='datetime-local'],
    .has-icon.rtds-input--lg [type='month'],
    .has-icon.rtds-input--lg [type='search'],
    .has-icon.rtds-input--lg [type='tel'],
    .has-icon.rtds-input--lg [type='time'],
    .has-icon.rtds-input--lg [type='week'],
    .has-icon.rtds-input--lg [multiple],
    .has-icon.rtds-input--lg textarea {
    padding-left: var(--spacing-14);
}

URL: /components/raw/input/input.built.css
Filesystem Path: components/02-atoms/_input/input.built.css
Size: 7.4 KB

Content:


                                /**
 * INPUT
 * 
 *
*/
@layer components {
    .rtds-input {
        @apply rtds-flex rtds-items-center rtds-relative;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input [type='file'],
    .rtds-input textarea {
        @apply rtds-w-full rtds-rounded-lg;
    }

    .rtds-input [type='file'] {
        @apply rtds-p-1;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple],
    .rtds-input textarea {
        @apply rtds-py-2 rtds-px-3 rtds-border rtds-border-input;
    }

    .rtds-input [type='text'],
    .rtds-input input:where(:not([type])),
    .rtds-input [type='email'],
    .rtds-input [type='url'],
    .rtds-input [type='password'],
    .rtds-input [type='number'],
    .rtds-input [type='date'],
    .rtds-input [type='datetime-local'],
    .rtds-input [type='month'],
    .rtds-input [type='search'],
    .rtds-input [type='tel'],
    .rtds-input [type='time'],
    .rtds-input [type='week'],
    .rtds-input [multiple] {
        @apply rtds-h-11;
    }

    /* ICON STYLES */
    .rtds-input__icon {
        @apply rtds-absolute rtds-left-4 rtds-content-placeholder rtds-w-6 rtds-h-6;
    }

    .rtds-input--sm .rtds-input__icon {
        @apply rtds-w-4 rtds-h-4 rtds-left-3;
    }

    .rtds-input--lg .rtds-input__icon {
        @apply rtds-w-8 rtds-h-8 rtds-left-4;
    }

    /* HAS ICON SIZE STYLE */
    .has-icon.rtds-input [type='text'],
    .has-icon.rtds-input input:where(:not([type])),
    .has-icon.rtds-input [type='email'],
    .has-icon.rtds-input [type='url'],
    .has-icon.rtds-input [type='password'],
    .has-icon.rtds-input [type='number'],
    .has-icon.rtds-input [type='date'],
    .has-icon.rtds-input [type='datetime-local'],
    .has-icon.rtds-input [type='month'],
    .has-icon.rtds-input [type='search'],
    .has-icon.rtds-input [type='tel'],
    .has-icon.rtds-input [type='time'],
    .has-icon.rtds-input [type='week'],
    .has-icon.rtds-input [multiple],
    .has-icon.rtds-input textarea {
        @apply rtds-pl-12;
    }

    /* VALIDATION STYLES */
    .is-invalid .rtds-input input,
    .rtds-input input[aria-invalid="true"],
    .has-error.rtds-input input {
        @apply rtds-border-2 rtds-border-error-dark;
    }

    /* DISABLED STATE */
    .rtds-input input:disabled,
    .rtds-input textarea:disabled {
        color: var(--color-content-disabled);
        border-color: var(--color-border-gray-03);
        cursor: not-allowed;
    }

    /* SIZE STYLES */
    .rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple] {
        @apply rtds-h-8;
    }

    .rtds-input--sm [type='text'],
    .rtds-input--sm input:where(:not([type])),
    .rtds-input--sm [type='email'],
    .rtds-input--sm [type='url'],
    .rtds-input--sm [type='password'],
    .rtds-input--sm [type='number'],
    .rtds-input--sm [type='date'],
    .rtds-input--sm [type='datetime-local'],
    .rtds-input--sm [type='month'],
    .rtds-input--sm [type='search'],
    .rtds-input--sm [type='tel'],
    .rtds-input--sm [type='time'],
    .rtds-input--sm [type='week'],
    .rtds-input--sm [multiple],
    .rtds-input--sm textarea {
        @apply rtds-py-1 rtds-px-2;
    }

    .has-icon.rtds-input--sm [type='text'],
    .has-icon.rtds-input--sm input:where(:not([type])),
    .has-icon.rtds-input--sm [type='email'],
    .has-icon.rtds-input--sm [type='url'],
    .has-icon.rtds-input--sm [type='password'],
    .has-icon.rtds-input--sm [type='number'],
    .has-icon.rtds-input--sm [type='date'],
    .has-icon.rtds-input--sm [type='datetime-local'],
    .has-icon.rtds-input--sm [type='month'],
    .has-icon.rtds-input--sm [type='search'],
    .has-icon.rtds-input--sm [type='tel'],
    .has-icon.rtds-input--sm [type='time'],
    .has-icon.rtds-input--sm [type='week'],
    .has-icon.rtds-input--sm [multiple],
    .has-icon.rtds-input--sm textarea {
        @apply rtds-pl-10;
    }

    .rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple] {
        @apply rtds-h-14;
    }

    .rtds-input--lg [type='text'],
    .rtds-input--lg input:where(:not([type])),
    .rtds-input--lg [type='email'],
    .rtds-input--lg [type='url'],
    .rtds-input--lg [type='password'],
    .rtds-input--lg [type='number'],
    .rtds-input--lg [type='date'],
    .rtds-input--lg [type='datetime-local'],
    .rtds-input--lg [type='month'],
    .rtds-input--lg [type='search'],
    .rtds-input--lg [type='tel'],
    .rtds-input--lg [type='time'],
    .rtds-input--lg [type='week'],
    .rtds-input--lg [multiple],
    .rtds-input--lg textarea {
        @apply rtds-py-3 rtds-px-3;
    }

    .has-icon.rtds-input--lg [type='text'],
    .has-icon.rtds-input--lg input:where(:not([type])),
    .has-icon.rtds-input--lg [type='email'],
    .has-icon.rtds-input--lg [type='url'],
    .has-icon.rtds-input--lg [type='password'],
    .has-icon.rtds-input--lg [type='number'],
    .has-icon.rtds-input--lg [type='date'],
    .has-icon.rtds-input--lg [type='datetime-local'],
    .has-icon.rtds-input--lg [type='month'],
    .has-icon.rtds-input--lg [type='search'],
    .has-icon.rtds-input--lg [type='tel'],
    .has-icon.rtds-input--lg [type='time'],
    .has-icon.rtds-input--lg [type='week'],
    .has-icon.rtds-input--lg [multiple],
    .has-icon.rtds-input--lg textarea {
        @apply rtds-pl-14;
    }
}

URL: /components/raw/input/input.css
Filesystem Path: components/02-atoms/_input/input.css
Size: 7 KB

Handle: @input--readonly
Preview:
- With layout
- Component only
Filesystem Path: components/02-atoms/_input/input.njk
References (1): @icon

Input

Componente campo di input testuale. Utilizzato come partial all’interno di input-field (03-molecules).

Comportamento

Il componente viene renderizzato come <input> avvolto in un <div> contenitore. Supporta varianti di dimensione (--lg, --sm) tramite classi modificatore sul wrapper.

Varianti

Varianti di Dimensione

default: Dimensione standard
lg: Dimensione grande
sm: Dimensione piccola

Varianti di Stato

disabled: Campo non disponibile — escluso dal tab order, non inviato nel form
readonly: Campo non modificabile ma navigabile e inviato nel form (solo tipi testo)

Varianti di Stile

search: Input di ricerca con icona a sinistra (iconPlaceholder: mini--magnifying-glass)

Varianti Speciali

password: Campo password con type="password" e autocomplete="current-password" — da usare sempre all’interno della molecola input-field--password che aggiunge il toggle show/hide accessibile

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 dell’input; serve anche per collegare la <label> tramite for
type (stringa, opzionale): Tipo dell’input (es. text, email, number). Default: nessuno. Per type="password" usare la variante input--password
placeholder (stringa, opzionale): Testo segnaposto
classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento <input>
padding (stringa, opzionale): Classe di padding personalizzata
border (stringa, opzionale): Classe di bordo personalizzata
radius (stringa, opzionale): Classe di border-radius personalizzata
iconPlaceholder (stringa, opzionale): ID icona posizionata a sinistra dell’input
iconAlert (booleano, opzionale): Se true, mostra l’icona di errore (⚠) posizionata a destra dell’input. Per i tipi con picker nativo (date, time, datetime-local, month, week) l’icona viene automaticamente posizionata a sinistra del controllo nativo del browser, applicando un offset maggiore (rtds-right-8 invece di rtds-right-4) per evitare sovrapposizioni
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 (valori possibili)
ariaDescribedBy (stringa, opzionale): ID dell’elemento descrittivo del campo (usato in input-field)
hasErrorControl (booleano, opzionale): Se true, aggiunge il wrapper per il messaggio di errore e collega aria-describedby
ariaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" per indicare il campo in errore
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. Non applicabile a type="checkbox" e type="radio"

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

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

Struttura e semantica

Il componente è renderizzato come <input> — 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)

Navigazione da tastiera

Tasto	Azione
`Tab` / `Shift+Tab`	Sposta il focus sul/dal campo

Gestione del focus

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

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-input--lg: Variante grande
.rtds-input--sm: Variante piccola

Classi di stato

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

Stato disabled e readonly

Stato	Attributo HTML	CSS	Comportamento form
`disabled`	`disabled`	`color: --color-content-disabled; border-color: --color-border-gray-03; cursor: not-allowed`	Non inviato; escluso dal tab order
`readonly`	`readonly`	nessuno stile aggiuntivo	Inviato; rimane nel tab order

disabled e readonly sono comunicati agli screen reader direttamente dagli attributi HTML nativi — nessun ARIA aggiuntivo necessario.

Esempi di utilizzo

<!-- Input base -->
<div class="rtds-input">
  <input id="nome" type="text" placeholder="Inserisci il tuo nome">
</div>

<!-- Input grande -->
<div class="rtds-input rtds-input--lg">
  <input id="nome-lg" type="text" placeholder="Inserisci il tuo nome">
</div>

<!-- Input piccolo -->
<div class="rtds-input rtds-input--sm">
  <input id="nome-sm" type="text" placeholder="Inserisci il tuo nome">
</div>

<!-- Input in stato di errore -->
<div class="rtds-input has-error">
  <input id="email" type="email" aria-invalid="true" aria-describedby="emailError">
  <div id="emailError">Inserisci un indirizzo email valido</div>
</div>

<!-- Input disabilitato -->
<div class="rtds-input">
  <input id="cf" type="text" disabled>
</div>

<!-- Input readonly -->
<div class="rtds-input">
  <input id="username" type="text" value="mario.rossi" readonly>
</div>