Regione Toscana Design System Design System Servizi

Check fieldset component: Default 

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

    </legend>

    <div class="rtds-input rtds-input-field rtds-input-checkbox">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId0" name="radioId0" data-label="radioShortLabel" class="   " type="checkbox">
            <label class="rtds-input-checkbox__label" for="radioId0">
                label checkbox
            </label>
        </div>

    </div>

    <div class="rtds-input rtds-input-field rtds-input-checkbox">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId1" name="radioId1" data-label="radioShortLabel" class="   " type="checkbox">
            <label class="rtds-input-checkbox__label" for="radioId1">
                label checkbox
            </label>
        </div>

    </div>

    <div class="rtds-input rtds-input-field rtds-input-checkbox">
        <div class="rtds-flex rtds-gap-2 rtds-items-center">
            <input id="radioId2" name="radioId2" data-label="radioShortLabel" class="   " type="checkbox">
            <label class="rtds-input-checkbox__label" for="radioId2">
                label checkbox
            </label>
        </div>

    </div>

</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, checkboxCount) %}
  {% render '@input-checkbox', { id: inputId ~ i, shortLabel: inputShortLabel, padding: inputPadding, border: inputBorder, radius: inputRadius, classes: inputClasses, checked: inputChecked, placeholder: inputPlaceholder, iconPlaceholder: inputIconPlaceholder, fieldRequired: inputRequired, ariaDescribedBy: inputAriaDescribedBy, hasErrorControl: inputHasErrorControl, hasError: inputHasError, errorId: inputErrorId, 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": "Check fieldset",
  "checkboxCount": 3,
  "inputId": "radioId",
  "inputShortLabel": "radioShortLabel",
  "fieldsetName": "radioFieldsetName",
  "inputErrorId": "checkboxErrorId"
}

Checkbox Fieldset

Gruppo di checkbox raggruppati all’interno di un fieldset, utilizzato per raccogliere input multipli correlati tra loro.

Comportamento

Il componente utilizza un <fieldset> HTML con <legend> e un gruppo di checkbox. 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, opzionale): Nome del fieldset

Parametri della Legenda

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

Parametri dei Checkbox

  • checkboxCount (numero, opzionale): Numero di checkbox da generare
  • inputId (stringa, obbligatorio): ID base per i checkbox (verrà concatenato con un indice)
  • inputShortLabel (stringa, opzionale): Etichetta breve per i checkbox
  • inputChecked (booleano, opzionale): Indica se i checkbox sono selezionati
  • inputRequired (booleano, opzionale): Indica se i checkbox sono obbligatori
  • inputAriaDescribedBy (stringa, opzionale): ID dell’elemento che descrive i checkbox
  • inputHasErrorControl (booleano, opzionale): Indica se i checkbox hanno controllo errori
  • inputHasError (booleano, opzionale): Indica se i checkbox hanno errori
  • inputErrorId (stringa, opzionale): ID dell’elemento di errore
  • inputDescription (stringa, opzionale): Descrizione testuale dei checkbox

Parametri di Stile

  • inputPadding (stringa, opzionale): Padding dei checkbox
  • inputBorder (stringa, opzionale): Bordo dei checkbox
  • inputRadius (stringa, opzionale): Raggio del bordo dei checkbox
  • inputClasses (stringa, opzionale): Classi CSS aggiuntive per i checkbox

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — il <fieldset> con <legend> raggruppa semanticamente i checkbox correlati; la <legend> funge da etichetta del gruppo
  • 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 checkbox 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 checkbox
  • Ogni singolo checkbox è gestito dal componente input-checkbox con la propria <label> associata
  • 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 checkbox

Attributi ARIA

Attributo Valori Condizione
aria-invalid "true" presente sul <fieldset> quando fieldsetAriaInvalid è true
aria-live "assertive" sullo span del messaggio di errore
aria-describedby ID del messaggio di errore / descrizione presente sui singoli <input> quando ci sono errori o descrizioni

Screen reader

  • Lo screen reader annuncia il gruppo come <fieldset> con il nome della <legend>
  • 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-checkbox-fieldset">
  <legend class="rtds-input-field__label">Seleziona le opzioni</legend>
  <div class="rtds-input rtds-input-checkbox">
    <input type="checkbox" id="option1" name="options">
    <label for="option1">Opzione 1</label>
  </div>
  <div class="rtds-input rtds-input-checkbox">
    <input type="checkbox" id="option2" name="options">
    <label for="option2">Opzione 2</label>
  </div>
</fieldset>

<!-- Esempio con errore -->
<fieldset class="rtds-checkbox-fieldset" aria-invalid="true">
  <legend class="rtds-input-field__label">
    Seleziona almeno un'opzione <abbr title="obbligatorio">*</abbr>
  </legend>
  <div class="rtds-input rtds-input-checkbox">
    <input type="checkbox" id="option1" name="options" aria-describedby="fieldset-error">
    <label for="option1">Opzione 1</label>
  </div>
  <span class="rtds-input-field__hint">
    <span id="fieldset-error" aria-live="assertive" class="rtds-input-field__error">
      Seleziona almeno un'opzione
    </span>
  </span>
</fieldset>

Note

  • Il componente utilizza il componente input-checkbox per generare i singoli checkbox
  • Gli errori e le descrizioni sono gestiti all’interno di un elemento rtds-input-field__hint