Input Radio

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

Comportamento

Il componente renderizza un <input type="radio"> con la relativa <label> associata. L’attributo name raggruppa logicamente i radio button in un gruppo a selezione singola. Quando usato all’interno di un <fieldset> (inFieldset: true), i messaggi di errore e descrizione sono gestiti dal componente parent radio-fieldset.

Varianti

Varianti di Stato

• default: Configurazione base del radio button
• is-required: Radio button obbligatorio
• has-error-markup: Radio button con markup per la gestione degli errori
• has-description: Radio button con descrizione aggiuntiva
• has-error: Radio button con stato di errore
• has-error-and-description: Radio button con stato di errore e descrizione
• disabled: Radio button non disponibile — escluso dal tab order, non inviato nel form; label e controllo appaiono muted

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 radio button
• id (stringa, obbligatorio): Identificatore univoco dell’input
• name (stringa, obbligatorio): Nome per il gruppo di radio button
• shortLabel (stringa, opzionale): Versione abbreviata dell’etichetta per l’attributo data-label
• labelClasses (stringa, opzionale): Classi CSS aggiuntive per l’etichetta
• padding (stringa, opzionale): Padding dell’input
• border (stringa, opzionale): Stile del bordo dell’input
• radius (stringa, opzionale): Raggio del bordo dell’input
• classes (stringa, opzionale): Classi CSS aggiuntive per l’input
• checked (booleano, opzionale): Se true, il radio button è selezionato

Parametri di Accessibilità

• fieldRequired (booleano, opzionale): Se true, stampa aria-required="true" e aggiunge il wrapper del messaggio di errore
• ariaDescribedBy (stringa, opzionale): ID dell’elemento che descrive il campo
• hasErrorControl (booleano, opzionale): Se true, attiva la validazione dell’input
• ariaInvalid (booleano, opzionale): Se true, aggiunge aria-invalid="true" all’input
• alertIcon (stringa, opzionale): ID per l’icona di alert posizionata a destra
• inFieldset (booleano, opzionale): Se true, indica che l’input è contenuto in un fieldset
• disabled (booleano, opzionale): Se true, aggiunge l’attributo disabled — il radio button è non interattivo, escluso dal tab order e non inviato nel form. La label appare muted tramite color: --color-content-disabled

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — la <label> è sempre associata all’<input> tramite for / id; quando usato in un gruppo, il <fieldset> con <legend> del componente parent radio-fieldset fornisce il contesto del gruppo
• 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 radio button ha una <label> visibile associata
• 4.1.2 Nome, ruolo, valore — aria-required, aria-describedby e aria-invalid comunicano lo stato del campo

Struttura e semantica

• Il componente è renderizzato come <div> contenente un <input type="radio"> e la relativa <label> associata tramite for / id
• L’attributo name raggruppa logicamente i radio button in un gruppo a selezione singola
• L’indicatore di campo obbligatorio è un <abbr title="obbligatorio">*</abbr> nella label
• Quando usato all’interno di un <fieldset> (inFieldset: true), i messaggi di errore e descrizione sono gestiti dal componente parent radio-fieldset

Attributi ARIA

Screen reader

• Lo screen reader annuncia il radio button con il testo della label, il ruolo (pulsante di opzione), lo stato selezionato/deselezionato e la posizione nel gruppo
• 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 (gruppo di radio) -->
<fieldset>
  <legend>Seleziona un'opzione</legend>
  <div class="rtds-input rtds-input-radio">
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
      <input id="option1" name="my-group" type="radio">
      <label class="rtds-input-radio__label" for="option1">Opzione 1</label>
    </div>
  </div>
  <div class="rtds-input rtds-input-radio">
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
      <input id="option2" name="my-group" type="radio">
      <label class="rtds-input-radio__label" for="option2">Opzione 2</label>
    </div>
  </div>
</fieldset>

<!-- Esempio con errore -->
<div class="rtds-input rtds-input-field rtds-input-radio">
  <div class="rtds-flex rtds-gap-2 rtds-items-center">
    <input id="radio-err" name="radio-group" type="radio"
           aria-required="true" aria-invalid="true" aria-describedby="radio-error">
    <label class="rtds-input-radio__label" for="radio-err">
      Opzione <abbr title="obbligatorio">*</abbr>
    </label>
  </div>
  <span class="rtds-input-field__hint">
    <span id="radio-error" aria-live="assertive" class="rtds-input-field__error">
      Selezionare un'opzione
    </span>
  </span>
</div>

Note

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