Radio Fieldset

Gruppo di radio button raggruppati all’interno di un fieldset, utilizzato per raccogliere input multipli correlati tra loro dove è possibile selezionare una sola opzione.

Comportamento

Il componente utilizza un <fieldset> HTML con <legend> e un gruppo di radio button. Supporta vari stati e configurazioni per l’accessibilità e la validazione.

Varianti

Varianti di Stato

• default: Configurazione base senza validazione
• required: Fieldset obbligatorio con controllo errori
• has-error: Fieldset con errori di validazione
• has-description: Fieldset con descrizione aggiuntiva
• has-error-and-description: Combina errori e descrizione

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 del Fieldset

• fieldsetClasses (stringa, opzionale): Classi CSS aggiuntive per il fieldset
• fieldsetAriaInvalid (booleano, opzionale): Indica se il fieldset ha errori di validazione
• fieldsetRequired (booleano, opzionale): Indica se il fieldset è obbligatorio
• fieldsetName (stringa, obbligatorio): Nome del fieldset (condiviso tra tutti i radio button del gruppo)

Parametri della Legenda

• legend (stringa, obbligatorio): Testo della legenda del fieldset
• legendClasses (stringa, opzionale): Classi CSS aggiuntive per la legenda

Parametri dei Radio Button

• radioCount (numero, opzionale): Numero di radio button da generare
• inputId (stringa, obbligatorio): ID base per i radio button (verrà concatenato con un indice)
• inputShortLabel (stringa, opzionale): Etichetta breve per i radio button
• inputChecked (booleano, opzionale): Indica se i radio button sono selezionati
• inputRequired (booleano, opzionale): Indica se i radio button sono obbligatori
• inputAriaDescribedBy (stringa, opzionale): ID dell’elemento che descrive i radio button
• inputHasErrorControl (booleano, opzionale): Indica se i radio button hanno controllo errori
• inputHasError (booleano, opzionale): Indica se i radio button hanno errori
• inputErrorId (stringa, opzionale): ID dell’elemento di errore
• inputDescription (stringa, opzionale): Descrizione testuale dei radio button
• inputPadding (stringa, opzionale): Padding dei radio button
• inputBorder (stringa, opzionale): Bordo dei radio button
• inputRadius (stringa, opzionale): Raggio del bordo dei radio button
• inputClasses (stringa, opzionale): Classi CSS aggiuntive per i radio button

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — il <fieldset> con <legend> raggruppa semanticamente i radio button correlati, dove è possibile selezionare una sola opzione
• 3.3.1 Identificazione degli errori — gli errori sono comunicati tramite aria-invalid sul <fieldset> e annunciati con aria-live="assertive"
• 3.3.2 Etichette o istruzioni — ogni radio button ha una <label> associata; la <legend> descrive il gruppo
• 4.1.2 Nome, ruolo, valore — aria-invalid comunica lo stato di errore del gruppo

Struttura e semantica

• Il componente è renderizzato come <fieldset> con <legend> come etichetta del gruppo di radio button
• Ogni singolo radio button è gestito dal componente input-radio con la propria <label> associata
• L’attributo name (corrispondente a fieldsetName) è condiviso tra tutti i radio button del gruppo per garantire la selezione singola
• L’indicatore di campo obbligatorio è un <abbr title="obbligatorio">*</abbr> nella <legend>
• I messaggi di errore e le descrizioni sono raggruppati in <span class="rtds-input-field__hint"> al di fuori dei singoli radio button

Attributi ARIA

Screen reader

• Lo screen reader annuncia il gruppo come <fieldset> con il nome della <legend> e il numero di opzioni disponibili
• 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 -->
<fieldset class="rtds-radio-fieldset">
  <legend class="rtds-input-field__label">Scegli un'opzione</legend>
  <div class="rtds-input rtds-input-radio">
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
      <input id="radio1" name="my-group" type="radio">
      <label class="rtds-input-radio__label" for="radio1">Opzione 1</label>
    </div>
  </div>
  <div class="rtds-input rtds-input-radio">
    <div class="rtds-flex rtds-gap-2 rtds-items-center">
      <input id="radio2" name="my-group" type="radio">
      <label class="rtds-input-radio__label" for="radio2">Opzione 2</label>
    </div>
  </div>
</fieldset>

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

Note

• Il componente utilizza il componente input-radio per generare i singoli radio button
• Gli errori e le descrizioni sono gestiti all’interno di un elemento rtds-input-field__hint
• I parametri inputPlaceholder e inputIconPlaceholder sono presenti nel template ma non sono utilizzati nella configurazione di default