Regione Toscana Design System

Check fieldset component: Has Error And Description 

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

        <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>

    </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" aria-describedBy="checkboxErrorId idInputDescription">
            <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" aria-describedBy="checkboxErrorId idInputDescription">
            <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" aria-describedBy="checkboxErrorId idInputDescription">
            <label class="rtds-input-checkbox__label" for="radioId2">
                label checkbox
            </label>
        </div>

    </div>

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

        <span class="rtds-input-field__error" id="checkboxErrorId" aria-live="assertive">
            devi scegliere un&#39;opzione per *nome campo*
        </span>

        <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, 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",
  "fieldsetRequired": true,
  "errorDescription": "devi scegliere un'opzione per *nome campo*",
  "inputHasErrorControl": true,
  "fieldsetAriaInvalid": true,
  "inputAriaDescribedBy": "idInputDescription",
  "inputDescription": "descrizione"
}

Componente Checkbox Fieldset

Descrizione

Il componente Checkbox Fieldset è un gruppo di checkbox raggruppati all’interno di un fieldset, utilizzato per raccogliere input multipli correlati tra loro.

Markup

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

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

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 Checkbox

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

Parametri di Stile

  • inputPadding: Padding dei checkbox
  • inputBorder: Bordo dei checkbox
  • inputRadius: Raggio del bordo dei checkbox
  • inputClasses: Classi CSS aggiuntive per i checkbox

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