Regione Toscana Design System

Radio fieldset component: Has Description 

<fieldset class="rtds-input-field rtds-gap-2">
    <legend class="rtds-input-field__label">
        Radio fieldset

    </legend>

    <div class="rtds-input rtds-input-field rtds-input-radio">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId0" name="radioFieldsetName" data-label="radioShortLabel" class="  " type="radio" aria-describedBy="idInputDescription">
            <label class="rtds-input-radio__label" for="radioId0">
                label radiobutton
            </label>
        </div>

    </div>

    <div class="rtds-input rtds-input-field rtds-input-radio">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId1" name="radioFieldsetName" data-label="radioShortLabel" class="  " type="radio" aria-describedBy="idInputDescription">
            <label class="rtds-input-radio__label" for="radioId1">
                label radiobutton
            </label>
        </div>

    </div>

    <div class="rtds-input rtds-input-field rtds-input-radio">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId2" name="radioFieldsetName" data-label="radioShortLabel" class="  " type="radio" aria-describedBy="idInputDescription">
            <label class="rtds-input-radio__label" for="radioId2">
                label radiobutton
            </label>
        </div>

    </div>

    <span class="rtds-input-field__hint">

        <span class="rtds-input-field__description" id="idInputDescription">
            descrizione
        </span>

    </span>

</fieldset>
 
<fieldset class="rtds-input-field rtds-gap-2{% if fieldsetClasses %} {{ fieldsetClasses }}{% endif %}"{% if fieldsetAriaInvalid %} aria-invalid="true"{% endif %}>
  <legend class="rtds-input-field__label{% if legendClasses %} {{ legendClasses }}{% endif %}">
    {{ legend }}
    {% if fieldsetRequired %}
        <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>
    {% endif %}
  </legend>
{% for i in range(0, radioCount) %}
 {% render '@input-radio', { name: fieldsetName, id: inputId ~ i, shortLabel: inputShortLabel, padding: inputPadding, border: inputBorder, radius: inputRadius, classes: inputClasses, checked: inputChecked, placeholder: inputPlaceholder, iconPlaceholder: inputIconPlaceholder, fieldRequired: inputRequired, ariaDescribedBy: inputAriaDescribedBy, errorId: inputErrorId, hasErrorControl: inputHasErrorControl, hasError: inputHasError, inFieldset: true }, true %}
{% endfor %}
{% if fieldsetRequired or inputAriaDescribedBy or inputHasErrorControl %}
  <span class="rtds-input-field__hint">
      {% if fieldsetRequired or inputHasErrorControl %}
      <span class="rtds-input-field__error" id="{{ inputErrorId }}" aria-live="assertive">
          {{ errorDescription }}
      </span>
      {% endif %}
      {% if inputDescription %}
      <span class="rtds-input-field__description" id="{{ inputAriaDescribedBy }}">
          {{ inputDescription }}
      </span>
      {% endif %}
  </span>

{% endif %}
</fieldset>
 
{
  "legend": "Radio fieldset",
  "radioCount": 3,
  "inputId": "radioId",
  "inputShortLabel": "radioShortLabel",
  "fieldsetName": "radioFieldsetName",
  "ariaDescribedBy": "idInputDescription",
  "inputDescription": "descrizione",
  "inputAriaDescribedBy": "idInputDescription"
}

Componente Radio Fieldset

Descrizione

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

Markup

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

Il componente supporta diverse varianti preconfigurate:

  1. Default: Configurazione base senza validazione
  2. Required: Fieldset obbligatorio con controllo errori
  3. Has-error: Fieldset con errori di validazione
  4. Has-description: Fieldset con descrizione aggiuntiva
  5. Has-error-and-description: Combina errori e descrizione

Accessibilità

Il componente implementa diverse caratteristiche di accessibilità:

  • Supporto per aria-invalid per indicare errori
  • Supporto per aria-describedby per descrizioni
  • Messaggi di errore con aria-live="assertive"
  • Indicatore visivo per campi obbligatori (asterisco)

Parametri di Configurazione per sviluppo in NJK

Parametri del Fieldset

  • fieldsetClasses: Classi CSS aggiuntive per il fieldset
  • fieldsetAriaInvalid: Booleano che indica se il fieldset ha errori di validazione
  • fieldsetRequired: Booleano che indica se il fieldset è obbligatorio
  • fieldsetName: Nome del fieldset

Parametri della Legenda

  • legend: Testo della legenda del fieldset
  • legendClasses: Classi CSS aggiuntive per la legenda

Parametri dei Radio Button

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

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